Question

我有这段代码：

Vue.component('parent', {
  template: `
    <div>
      <child v-for='(child, index) in children' :key='index' :childNumber="index+1" v-on:removeChild="removeChild" />
    </div>
  `,
  data: function() {
    return {
      children: [{}, {}, {}]
    }
  },
  methods: {
    removeChild: function(index) {
      this.children.splice(index, 1);
    }
  }
});

Vue.component('child', {
  template: `
    <div>
      <input :value="'I am child number: '+childNumber"></input>
      <button v-on:click="removeChild">Remove child {{childNumber}}</button>
    </div>
  `,
  data: function() {
    return {}
  },
  methods: {
    removeChild: function() {
      this.$emit('removeChild', this.childNumber);
    }
  },
  props: ['childNumber']
});

const app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!',
    }
});

当您点击任何＆＃34;删除＆＃34;按钮，它会删除最后一个子项，无论您单击哪个按钮。如何更改我的代码，以便删除您认为将删除的子项而不触及其他子项？（即点击＆＃34;删除孩子2＆＃34;将只留下孩子1和3在屏幕上）

小提琴：https://jsfiddle.net/wgr3sxqr/6/

Answer 1

使用空子项时无法查看更改。

您遇到的问题是：

删除任何子项（假设子项1）后，该组件将重新呈现。由于您的命名仅基于索引，因此您将始终看到子项（1和2）。原因是因为孩子2变成1而孩子3变成了2，依此类推。

<强>解决方案

尝试向每个组件添加name属性以查看差异。还因为childNumber为index + 1，您必须在删除方法中从索引中减去1。

这是您案件的Fiddle。

这是更新的代码：

Vue.component('parent', {
  template: `
    <div>
      <child v-for='(child, index) in children' :key='index' :childNumber="index+1" 
             v-on:removeChild="removeChild" :name="child.name"/>
    </div>
  `,
  data: function() {
    return {
      children: [{name: 'child 1'}, {name: 'child 2'}, {name: 'child 3'}]
    }
  },
  methods: {
    removeChild: function(index) {
      this.children.splice(index - 1, 1);
    }
  }
});

Vue.component('child', {
  template: `
    <div>
      <input :value="'I am ' + name"></p>
      <button v-on:click="removeChild">Remove {{name}}</button>
    </div>
  `,
  data: function() {
    return {}
  },
  methods: {
    removeChild: function() {
      this.$emit('removeChild', this.childNumber);
    }
  },
  props: ['childNumber', 'name']
});
const app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!',
    }
});

Vue删除子组件

1 个答案: