Question

我的简单应用程序从API获取数据，并使用v-for列表在页面上呈现数组。

数组看起来像这样

posts : [{id : 1, likes: 2}, {id: 2, likes: 3} ...]

循环看起来像这样

<div v-for="post in posts" :key = "post.id">
    <p>{{ post.title}} </p>
    <button @click="like(post.id)">Like</button>
</div>

我试图在单击按钮时更新点赞计数，我使用以下命令，但是即使点赞计数正在更新，渲染的点赞计数也不会更新。

like(id) {
    // post request sent to bank end
    this.$set(posts[id], 'likes', newLikes)
    console.log(this.posts)
}

即使“喜欢”计数已更新，新值也不会显示在更新v-for渲染的页面上，这是什么错误，我该如何解决？

Answer 1

您的问题要容易得多！我以前没看过：
您正在使用post.id作为数组的索引。

您需要做的是v-for="(post, idx) in posts"和@click="like(idx)"

注意：下面的答案是在我完全理解该问题之前，与OP问题无关，但仍然有用。

我在v-for中始终使用对象数组来进行的操作是将整个对象传递给onClick（或任何事件处理程序）。它是通过引用传递的，因此它恰好是数组中的对象，而不是副本。使代码更小，更易读。

我不知道，如果您有成千上万个组件，这是否是最佳性能解决方案。

<template>
  <div v-for="post in posts" :key="`${_uid}_${post.id}`">
    <p>{{ post.title }}</p>
    <button @click="onClickLike(post)">Like</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      posts: []
    }
  },
  async mounted () {
    this.posts = await fetch('https://api.web.site/v2/posts')
  },
  methods: {
    onClickLike (post) {
      post.like++
    }
  }
}
</script>

否则，您首先必须由.filter在@click处理程序中从数组post.id来发布帖子，然后对其进行更新。

Vue v-for列表未使用v-set更新

1 个答案: