Question

我从vuex getter获取一个posts数组，并使用v-for遍历它们以显示每个帖子及其评论，然后我添加了一个输入字段并将其与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>

<script>
  export default {
    data() {
      return {
        postContent: '',
        comment: ''
      }
    },

    methods: {
      addPost() {
        this.$store.dispatch('addPost', {
          content: this.postContent
        })
        this.postContent = ''
      },
      addComment(postID, index) {
        this.$store.dispatch('addComment', {
          body: this.comment,
          post_id: postID
        })
      }
    },

    created(){
        this.$store.dispatch( 'loadFeed' )
    },

    computed: {
        postsLoadStatus(){
        return this.$store.getters.getPostsLoadStatus
        },

        posts(){
        return this.$store.getters.getFeed
        }
    },
  }
</script>

但是当我将v-model设置为data属性并尝试在输入中键入内容时，它会分配给所有帖子，因此获取注释数据的正确方法是什么

Answer 1

创建一个接受函数的吸气剂：

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

然后在该:value而不是v-model上使用该吸气剂：

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

确保处理comment不存在的情况，并返回一个空字符串。

在帖子的v-for循环内使用v-model添加评论

1 个答案: