在vue2中，在父元素中删除元素之后，嵌套组件道具不会被更新。
在vue2中，在父元素中删除元素之后，嵌套组件道具不会被更新。
提问于 2016-11-27 10:28:56
对于我的应用程序，我使用两个Vue组件。一个呈现“日”列表，一个为每个“日”呈现“地点”列表。例如，“第一天”可以有“柏林”、“伦敦”、“纽约”的位置。
所有呈现都是正常的，但是在从日期列表中删除"Day 1“之后，视图就不会被呈现更正。这就是发生的事情：
- 删除日期的标题被替换为->更正。
- 删除的当天的内容没有被替换，->不正确
Vue.component('day-list', {
props: ['days'],
template: '<div><div v-for="(day, index) in dayItems">{{ day.name }} <a href="#" @click.prevent="remove(index)">Remove day</a><location-list :locations="day.locations"></location-list><br/></div></div>',
data: function() {
return {
dayItems: this.days
}
},
methods: {
remove(index) {
this.dayItems.splice(index, 1);
}
}
});
Vue.component('location-list', {
props: ['locations', 'services'],
template: '<div><div v-for="(location, index) in locationItems">{{ location.name }} <a href="#" @click.prevent="remove(index)"</div></div>',
data: function() {
return {
locationItems: this.locations
}
},
methods: {
remove(index) {
this.locationItems.splice(index, 1);
}
}
});
const app = window.app = new Vue({
el: '#app',
data: function() {
return {
days: [
{
name: 'Day 1',
locations: [
{name: 'Berlin'},
{name: 'London'},
{name: 'New York'}
]
},
{
name: 'Day 2',
locations: [
{name: 'Moscow'},
{name: 'Seul'},
{name: 'Paris'}
]
}
]
}
},
methods: {}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<div id="app">
<day-list :days="days"></day-list>
</div>
回答 1
Stack Overflow用户
发布于 2016-11-27 11:19:26
如果您还没有使用Vue-devtools，请使用它。它清楚地显示了问题，如下图所示：
正如您在上面看到的，您的day-list组件包含了原始列表中的所有时间，并直接列出了位置。您需要在中间再添加一个组件，称为day-details，它将呈现特定一天的信息。您可以在location-list中使用day-details。
以下是工作的更新代码：
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<div id="app">
<day-list :days="days"></day-list>
</div>Vue.component('day-list', {
props: ['days'],
template: `
<div>
<day-details :day="day" v-for="(day, index) in days">
<a href="#" @click.prevent="remove(index)">Remove day</a>
</day-details>
</div>`,
methods: {
remove(index) {
this.days.splice(index, 1);
}
}
});
Vue.component('day-details', {
props: ['day'],
template: `
<div>
{{ day.name }}
<slot></slot>
<location-list :locations="day.locations"></location-list>
<br/>
</div>`
});
Vue.component('location-list', {
props: ['locations', 'services'],
template: `
<div>
<div v-for="(location, index) in locations">
{{ location.name }}
<a href="#" @click.prevent="remove(index)">[x]</a>
</div>
</div>
`,
methods: {
remove(index) {
this.locations.splice(index, 1);
}
}
});
const app = window.app = new Vue({
el: '#app',
data: function() {
return {
days: [{
name: 'Day 1',
locations: [{
name: 'Berlin'
}, {
name: 'London'
}, {
name: 'New York'
}]
}, {
name: 'Day 2',
locations: [{
name: 'Moscow'
}, {
name: 'Seul'
}, {
name: 'Paris'
}]
}]
}
},
methods: {}
});另一件事--您的location-list模板有一个错误--您没有关闭<a>元素。如上例所示，您可以使用回勾操作符来具有多行模板，以避免模板错误。
此外，您不应该更改通过props传递的对象。它在这里工作，因为您正在传递通过引用传递的对象。但是，在子组件中修改字符串对象将导致以下错误：
Vue警告:避免直接变异道具..。
如果遇到此错误，可以使用事件机制，如对以下问题的回答：删除Vue子组件所解释的那样
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40827902
复制相关文章
相似问题
腾讯云开发者
