在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不會在物品被刪除後得到更新

回答

相關問題