Получение ошибок при обновлении объекта массива

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)