时间戳

首页 > 解决方案 > 刷新数组对象时出错

javascript - 刷新数组对象时出错

问题描述

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

这是显示所有文章的 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'”。

slug 包含在router-link内容中。如果我删除它，错误将与标题有关。

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

我该如何解决这个问题？

先感谢您。

标签： javascriptarraysvue.jsvuejs2

解决方案

您应该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)

推荐阅读