Question

我有一个带有v-for循环的Vue组件，其中显示3个帖子。我在循环中使用index，因此帖子具有以下索引

[0] Post 1
[1] Post 2
[2] Post 3

在v-for循环中，我正在调用一个名为updatePost()的函数，该函数接受post和index两个参数。这将进行API调用以更新帖子。 API调用完成后，我将使用index修改要更改的帖子的值。因为这是一个实时应用程序，有多个用户发布帖子，如果有人在我进行API调用之前添加了新帖子，那么VueJS会知道更新我最初在函数中使用的索引吗？

例如，我想更新第一篇文章，我将使用以下内容：

updatePost(post, 0)

但是在API调用完成之前，另一个用户添加了一个新的Post 1索引，将Post 1索引移到了1。这会导致更新错误的Post吗？

[0] Newly added post
[1] Post 1
[2] Post 2
[3] Post 3

Answer 1

ahhh ...现在，我了解了触发API后的含义以及如何使用索引。我认为您是对的，如果有人在响应完成之前更新了原始的post数组，那么索引将不足以准确地更新具有响应描述的posts数组。

// Your original code
updatePost: function(post, index) { 
  axios.post(‘/post’, { Id: post.id })
    .then(response => {
      post[index].description = response.data.description
  });
}

我可能根本不会担心将索引用作方法参数并修改逻辑以使其看起来像这样：

data() {
  return {
    posts: []
  }
},

methods: {
  updatePost: function(post) {
    axios.post('/post', { Id: post.id })
      .then(response => {
        let originalPost = this.posts.find(op => op.id == post.id);
        originalPost.description = response.data.description;
      });
  }
}

然后，当您最初调用updatePost方法时，只需传递要更新的特定数组元素索引。像这样：

this.updatePost(this.posts[0])

这样，每当API响应通过时，您都在查找适当的数组元素，方法是通过匹配post对象中的id而不是使用数组的索引来进行更新。因为，是的，如果在返回响应之前posts []数组已更改，则您不再可以依靠数组索引来标识要更新的正确post对象。

添加新添加的项目时，VueJS索引会更新吗？

1 个答案: