Vue.js 2 - 使用事件中心从数组中删除项目答案

【问题标题】：Vue.js 2 - removing items from array with event hubVue.js 2 - 使用事件中心从数组中删除项目
【发布时间】：2018-01-10 12:32:08
【问题描述】：

我在 Laravel 中使用 Vue.js 2，我在一个组件中有一个方法，我在其中向服务器发送删除请求，并在 vue 应用程序中发出事件。方法是这样的：

deleteAction() {
  let url = `extras/delete/${this.id}`;
  axios.delete(url);
  this.$eventHub.$emit('extras.delete', this.id);
  this.modal.style.display = "none";
}

在另一个组件中，我正在监听事件并从用于在模板中呈现这些项目的项目数组中删除该项目：

<template>
  <div>
    <div v-for="item in items" class="media row">
      <div class="media-left col-sm-3">
        <a href="#">
          <img class="media-object" :src="item.image_path" :alt="item.title">
        </a>
      </div>
      <div class="media-body col-sm-6">
        <h4 class="media-heading">{{ item.title }}</h4>
        <p>{{ item.description }}</p>
      </div>
      <div class="col-sm-3 action-buttons">
        <a class="btn btn-info" href="/extras/create" role="button">Rediger</a>
        <alert :id="item.id"></alert>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['items'],
  data () {
    return {}
  },
  created() {
      this.$eventHub.$on('extras.delete',(id) => {
          this.items = this.items.filter(function(el) {
            return el.id !== id;
          });
      })
  }
}
</script>

但是，即使我在事件下的调试工具中看到该事件发生，第一项仅在第二次尝试后才被删除，而第一项之后的所有其他项目在第一次尝试时正常删除。为什么会这样？

【问题讨论】：

你不应该直接修改一个道具。更好的方法是将 prop 分配给本地数据，然后对其进行变异。可能是因为这个而发生的。
啊，已经有答案了。但是使用 mutating props 是有效的。
是的，谢谢，我现在也改了。
酷！不客气:)

标签： javascript events vuejs2

【解决方案1】：

尝试添加关键属性。查看文档以获取更多详细信息https://vuejs.org/v2/guide/list.html#key

    <template>
  <div>
    <div v-for="item in items" :key="item.id" class="media row">
      <div class="media-left col-sm-3">
        <a href="#">
          <img class="media-object" :src="item.image_path" :alt="item.title">
        </a>
      </div>
      <div class="media-body col-sm-6">
        <h4 class="media-heading">{{ item.title }}</h4>
        <p>{{ item.description }}</p>
      </div>
      <div class="col-sm-3 action-buttons">
        <a class="btn btn-info" href="/extras/create" role="button">Rediger</a>
        <alert :id="item.id"></alert>
      </div>
    </div>
  </div>
</template>

【讨论】：

【解决方案2】：

将console.log放入创建的句柄和事件订阅者方法中，并检查您是否第一次获得所需的id。

【讨论】：