Vue.js 在POST中的v-for循环中使用v-model添加注释

我从vuex getter获取一个posts数组，并使用v-for在其中循环以显示每个post及其注释，然后我添加了一个输入字段，并将其与v-model绑定以获取输入值，并发送一个操作以将值发送到API

<div class="post-content"  v-for="(post, index) in posts">
   <div class="post-comment">
        <input type="text" class="form-control" placeholder="Add a comment" v-model="comment" @keyup.enter="addComment(post.id)">
   </div>
</div>

导出默认值{
数据（）{
返回{
后内容：“”，
注释：“”
}
},
方法：{
addPost（）{
此.$store.dispatch（'addPost'{
内容：this.postContent
})
this.postContent=“”
},
addComment（posted，index）{
此.$store.dispatch（'addComment'{
body:this.comment，
post_id:posted
})
}
},
创建（）{
此.$store.dispatch（'loadFeed'）
},
计算：{
postsLoadStatus（）{
返回此。$store.getters.getPostsLoadStatus
},
员额（）{
返回此。$store.getters.getFeed
}
},
}

---

但是，当我将v-model设置为数据属性并尝试在输入中键入它在所有帖子上分配的内容时，那么获取注释数据的正确方法是什么呢？创建一个接受函数的getter：

getters () {
   getCommentByPostId(state) => (post_id) => {
       return state.posts.find((post) => post.id === post_id).comment
   }
}

然后在

：value

上使用该getter，而不是

v-model

：

<input type="text" class="form-control" placeholder="Add a comment" :value="$store.getters['getCommentByPostId'](post.id)" @keyup.enter="addComment(post.id)">

---

确保处理注释不存在的情况，并返回空字符串。

创建一个接受函数的getter：

getters () {
   getCommentByPostId(state) => (post_id) => {
       return state.posts.find((post) => post.id === post_id).comment
   }
}

然后在

：value

上使用该getter，而不是

v-model

：

<input type="text" class="form-control" placeholder="Add a comment" :value="$store.getters['getCommentByPostId'](post.id)" @keyup.enter="addComment(post.id)">

---

确保处理

注释不存在的情况，并返回一个空字符串。
您正在循环中的每个元素上使用
v-model=“comment”
。它们都绑定到相同的数据引用。那么，您认为将每条注释绑定到其帖子的最佳方法是什么呢？您正在循环中的每个元素上使用
v-model=“comment”
。它们都绑定到同一个数据引用。那么，您认为将每条评论绑定到其帖子的最佳方法是什么？