Vueへの配列の渡し方

5358 ワード
map Laravel アウトプット 配列 Vue.js map テキストリンク

目次

1.ブログ編集画面に、編集前記事の配列を表示させたい
2.map関数

Laravel + Vue.js で、Vue側に配列を渡す処理をアウトプットとして書いてみました。

1. ブログ編集画面に、編集前記事の配列を表示させたい

今回実装させたかった機能は、
ブログ編集画面で、編集前の記事のカテゴリを、編集画面のカテゴリ入力フォームに表示させたい！
ということです。

Laravel 単体だと、

edit.blade.php
<div class="form-group">
    <label for="exampleInputEmail1">カテゴリ</label>
    <input
    type="text"
    class="form-control"
    name="tagCategory"
    value="@foreach ($post->tags as $tag){{ $tag->tag_name }} @endforeach"
    />
</div>

こんな感じで value に foreach 文を書くことで実装できると思いますが、
今回はブログ編集画面に Vue を使っているためこのようにはできません。

2. map関数

そこで使うのが、map 関数！

まずは、v-bindを使いコントローラから Vue 側にカテゴリの配列を渡します。

<edit-component v-bind:tags="{{ ($post->tags) }}"> </edit-component>

this.tags 自体はオブジェクトの連想配列になっているため、
tag_nameだけを取り出した配列にしてあげないといけません。

ここで map 関数を使います！

EditComponent.vue

<script>

name: "EditComponent",

props: {      
    tags: { type: Array },
},

data(tags) {
    const category = this.tags.map((item) => "#" + item.tag_name );
    const tag_category = category.join("");

    return {
        tagCategory: tag_category,
    };
},

そして編集画面のカテゴリ入力画面を、v-model="tagCategory" で指定して

EditComponent.vue
<div class="form-group">
    <label for="exampleInputEmail1">カテゴリ</label>
    <input
    type="text"
    class="form-control"
    name="tagCategory"
    v-model="tagCategory"
    />
</div>

実際の画面がこんな感じです！
編集前の記事で使われていたカテゴリがちゃんと表示されました！
これでわざわざカテゴリを書き直す必要もありません。

こんな便利なものがあったんだなぁ。
もっと勉強頑張りますっ！