Laravel Blade @foreach 中的 Vue.js v-model 多文本输入问题

Question

您好，我有一个可以查看帖子和 cmets 的 Laravel 应用。我的问题是输入文本中的 Vue v-model 和 Blade 中的 @foreach。它显示每个帖子的 cmets 输入框。当我将文本添加到帖子下的任何输入时，该文本会出现在页面上的每个评论输入中。我怎样才能只查看我正在输入的当前输入上的输入文本，而不是每一个？

我的 HTML：

                   @foreach($posts as $post)
                     <div class="row add-comment">
                        <div class="col-md-12">
                          <div class="form-group">
                            <input type="text" name="addComment" placeholder="Add your comment" class="form-control" v-model="comment">
                          </div>
                          <input id="addComment" type="submit" name="submitComment" value="Submit Comment" class="btn btn-primary" v-on:click="submitComment({{ $post->id }})">
                        </div>

                      </div>
                   @endforeach

我的 Vue：

var posts = new Vue({
    el: "#posts",
    data: {
      comment: '',
    },

    methods: {
      submitComment: function(id){

        $.ajaxSetup({
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr("content")
          }
        });

        $.ajax({
          url:'/post/comment/create/' + id,
          type: "POST",
          data: {
            comment: this.comment,
            post_id: id
          },

          success:function(response){
            toastr.success(response.response);
          },
          error: function(error){
            toastr.error(error.error)
          }
        });
      }
    },
  });

Answer 1

问题是您将相同的数据属性comment 绑定到每个输入。您需要为您的 v-model 创建一个数组以独立绑定每个元素。请尝试以下操作：

 data: {
   comment: [],
 },

 <input type="text" name="addComment-{{ $post->id }}" placeholder="Add your comment" class="form-control" v-model="comment[{{ $post->id }}]">

您可能需要事先将comment: [] 初始化为$posts 的长度，我没有测试过这段代码。

您的 ajax 也需要更新：

data: {
    comment: this.comment[id],
    post_id: id
},