Question

我有一个包含对象列表的数组（数据库中的所有帖子），我希望能够从对象更新一个值，并使用更新后的对象刷新该数组。

以下是显示所有文章的HTML组件：

  <tbody>
    <tr v-for="(post, index) in posts" :key="index">
      <td><router-link :to="`/admin/article/${ post.slug }`">{{  }}</router-link></td>
      <td>{{ post.lang === 'fr' ? 'Français' : 'English' }}</td>
      <td>{{ !!post.draft ? 'Draft' : 'Published' }}</td>
      <td>{{ formatDate(post.created_at) }}</td>
      <td>{{ formatDate(post.updated_at) }}</td>
      <td>
        <div class="actions">
          <span @click="handlePublish(post.id)">{{ !!post.draft ? 'Publish' : 'Unpublish' }}</span>
          |
          <router-link :to="`/admin/article/edit/${post.slug}`">Edit</router-link>
          |
          <span @click="handleDelete(post, index)">Delete</span>
        </div>
      </td>
    </tr>
  </tbody>

这是我正在努力的handlePublish()方法：

handlePublish (id) {
  this.$axios.post('/post/publish', {id: id}, {
    headers: {
      'Authorization': `Bearer <some token>`
    }})
    .then(response => {
      console.log(response) // returns the updated object without trouble
      this.posts = this.posts.map((post, index) => {
        if (post.id === id) {
          return response.data
        }
      })
    })
    .catch(e => console.log(e.response))
}

当我触发handlePublish方法时，出现诸如

之类的错误。

“无法读取未定义的属性'slug'”。

该子弹包含在内容的router-link中。如果删除它，则错误将与标题有关。

如果我不得不猜测，我会说问题发生在VueJS将旧数据交换为新数据时。

如何解决此问题？

谢谢。

Answer 1

您应该添加else并在else块中返回未更新的帖子，如下所示：

      this.posts = this.posts.map((post, index) => {
         if (post.id === id) {
             return response.data
        }else{
          return post;//<----
         }
      })

在您的代码中，您将返回一个数组：

  [undefined,undefined,undefined,<updatePost>,undefined,undefined ...]

带有JS的示例，该示例说明了您遇到的错误

let posts = [{
  id: 1,
  content: "aaa"
}, {
  id: 2,
  content: "bbb"
}, {
  id: 3,
  content: "ccc"
}]

let updatedpost = {
  id: 2,
  content: "more content"
};

posts = posts.map(post => {
  if (updatedpost.id == post.id) {
    return updatedpost;
  }
})

console.log(posts)
posts = [{
  id: 1,
  content: "aaa"
}, {
  id: 2,
  content: "bbb"
}, {
  id: 3,
  content: "ccc"
}]

posts = posts.map(post => {
  if (updatedpost.id == post.id) {
    return updatedpost;
  } else {
    return post;
  }
})

console.log(posts)

刷新数组对象时出现错误

1 个答案: