在 Vue 2 中，传递道具后 v-for 在项目被删除后不会更新

Question

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

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

在下面的示例中，您可以看到 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>

Answer 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 warn]: Avoid mutating a prop directly...

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

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

在 Vue 2 中，传递道具后 v-for 在项目被删除后不会更新

In Vue 2 after passing props v-for does not get updated after items are removed

vue.js

laravel-blade

vue-component