Vue.js で１つのフォームに複数データを動的に再バインドする

2019/12/08
(この記事の文字数: 171)

Vue.js を使って以下のようにひとつのフォームで複数のデータを再バインドして編集するようなUIを作るシンプルなサンプルを載せておきます。

Name:

Message:

配列のインデックス指定でバインドすると配列のインデックスに従って動的に再バインドしてくれるので特にややこしいお作法は必要ありませんでした。

以下が上記のサンプルのソースコードです。


<div id="app">
    <div>
        <label for="currentIndex">Name:</label>
        <select name="currentIndex" v-model="currentIndex">
            <option v-for="(message, index) in messages" v-bind:value="index">
                {{ message.name }}
            </option>
        </select>
    </div>
    <div>
        <label for="message">Message:</label><br />
        <textarea name="message" id="" cols="30" rows="6" v-model="messages[currentIndex].message"></textarea>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            messages: [
                { name: "Hoge", message: "This is hoge." },
                { name: "Fuga", message: "This is fuga." },
                { name: "Piyo", message: "This is piyo." }
            ],
            currentIndex: 0,
        },
    });
</script>