在 Vue 2 中，通过道具后 v-for 在删除项目后不会更新答案

【问题标题】：In Vue 2 after passing props v-for does not get updated after items are removed在 Vue 2 中，通过道具后 v-for 在删除项目后不会更新
【发布时间】：2017-04-03 23:54:52
【问题描述】：

如果我在 Vue 2 中使用 props 传递一个对象数组，并且在这个数组上我使用 v-for 指令，如果其中一个数组元素被删除，视图不会更新。

这似乎只有在 v-for 元素被声明为数据时才有效，但我的组件需要接收道具...

在下面的示例中，您可以看到services 数组中的元素确实被删除了，但没有触发 v-for。

我很确定我在这里做错了什么......

Vue.component('location-service-list', {
  props: ['services'],
  template: '<div>{{ services }}<div v-for="(service, index) in services">{{ service.id }} - {{ service.name }} <a @click.prevent="remove(index)">remove</a></div></div>',
  methods: {
    remove(index) {
        this.services.splice(index, 1);
        console.log(this.services);
      },
  }
});

const app = window.app = new Vue({
  el: '#admin-app'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.8/vue.js"></script>

<div id="admin-app">
  <location-service-list :services='[{"id":1,"name":"Test 1"},{"id":2,"name":"Test 2"}]'></location-service-list>
</div>

【问题讨论】：

标签： vue.js laravel-blade vue-component

【解决方案1】：

尝试在根组件中定义您的 servicesList，如下所示：

const app = window.app = new Vue({
    el: '#admin-app',
    data: {
        servicesList: [{"id":1,"name":"Test 1"},{"id":2,"name":"Test 2"}]
    }
});

你的模板为：

<div id="admin-app">
    <location-service-list :services='servicesList'></location-service-list>
</div>

现在它可以正常工作，没有任何问题。它之前没有工作，因为您将它作为常量/不可变对象传递（父模板中的 JSON 字符串，每当父模板重新呈现时，它总是评估为相同的值）。

从技术上讲，您不应该更改通过子组件中的道具传递的对象。如果您对通过props 传递的字符串值执行相同操作，您将收到如下错误消息：

[Vue 警告]：避免直接改变一个 prop...

要从父组件处理这个remove动作，你可以参考这个问题下的答案：Delete a Vue child component

该答案中的 jsFiddle 提供了一种将事件从子组件发送到父组件的方法，以便可以删除相应的子组件。

【讨论】：