Vue.js で1つのフォームに複数データを動的に再バインドする
ロゴ
「Web 開発」に関連する記事一覧

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

2019/12/08
jQuery JavaScript HTML 

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



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

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


<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>


  このエントリーをはてなブックマークに追加    

<<「Web 開発」の記事一覧に戻る

関連記事

にほんブログ村 ゲームブログ ファイアーエムブレムへ にほんブログ村 デザインブログ コンピュータグラフィックスへ

0.0646 sec
Copyright(C)2006-2020 puarts All Rights Reserved