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

您可以使用index中的v-for然后将每个框绑定到注释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/

使用v-model停止多个字段填充？

1 个答案: