问在vue2中，在父元素中删除元素之后，嵌套组件道具不会被更新。
EN

Stack Overflow用户

提问于 2016-11-27 02:28:56

回答 1查看 1.1K关注 0票数 0

对于我的应用程序，我使用两个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>

vue.js

vuejs2

回答 1

Stack Overflow用户

发布于 2016-11-27 03: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: {}
});