v-modelで複数フィールドの入力を停止しますか？

Question

私はVue.jsでかなり新しく、私が打ち明けている問題の大部分を理解している間に、私はこの問題の周りに頭を浮かべることができません。

私はAPIの出力に基づいて投稿のリストを表示しており、投稿ごとにコメントボックスが必要です。 APIへのポスティングは正常に機能していますが問題なく追加しますが、ループの各入力に同じvモデルを使用しているため、入力されたテキストはバインディングのために他のすべての入力に複製されます。

    <div class="row" v-if=""> 
         <div class="col-md-11"> 
          <input type="text" class="form-control" value="" title="" 
            placeholder="Add comments here.." v-model="note.note"> 
         </div> 
         <div class="col-md-1"> 
           <button type="button" class="btn btn-default" style="margin-left: -1.5rem" v-on:click="addNote(task.id)">Add Comment</button> 
         </div> 
        </div> 

JS：

addNote: function (id) { 
     if (this.note.note) { 
      Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value'); 

      this.$http.post('api/note/create/' + id, this.note).then(function (response) { 
       this.fetchTaskList(); 
      }); 

     } 
    } 

スクリーンショット：

私が使用する必要があります異なるディレクティブがありますか？それとも別の方法がありますか？

Answer 1

あなたはv-forでindexを使用して、そのようなノートcommentに各ボックスを結合することによってこれを行うことができます。

<!-- use index, so we know where we are in the loop --> 
<div v-for="(note, index) in notes"> 
    {{ note.note }} 
    <!-- Bind to the comment at the given index --> 
    <input v-model="notes[index].comment" /> 
</div> 

は今、あなただけのデータでそれを設定する必要があります。

data: { 
    notes: [ 
    {note: 'note 1', comment: ''}, 
    {note: 'note 2', comment: ''}, 
    {note: 'note 3', comment: ''} 
    ] 
} 

ここにJSFiddleがあります：https://jsfiddle.net/efxzmq9s/