在Vue 2传递道具之后v-for不会在物品被删除后得到更新

如果我使用Vue 2中的道具传递一个对象数组，并且在这个数组上使用v-for指令，那么view不会更新if其中一个数组元素被删除。在Vue 2传递道具之后v-for不会在物品被删除后得到更新

这似乎只有在V型的元素被声明为数据的工作，但我的组件需要接收道具......

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

来源

2016-11-20 Tudor Ravoiu

尝试定义根组件内的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公司警告]：避免直接突变的道具......

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

的的jsfiddle在这个问题的答案提供了一种方法来从子组件的事件发送到父组件，从而使相应的子组件都可以d eleted。

来源

2016-11-20 16:39:16 Mani

在Vue 2传递道具之后v-for不会在物品被删除后得到更新

回答

相关问题