Vuejs2 为什么价值没有'；使用v-for时是否在Vue中正确更新？

我已经创建了基本的JSFIDLE

var child=Vue.component（'my-child'）{
模板：
' '+
'消息：todo文本：{{todoText}}'+
“删除”+
'',
道具：['todoText']，
数据：函数（）{
返回{
mytodoText:this.todoText
}
},
方法：{
删除：函数（）{
this.emit（'completed'，this.mytodoct）；
}
}
});
var root=Vue.component（'my-component'{
模板：“”，
道具：[待办事项]，
数据：函数（）{
返回{
mytodos:this.todos
}
},
方法：{
已完成：功能（todo）{
控制台日志（todo）；
var index=this.mytodos.indexOf（todo，0）；
如果（索引>-1）{
这个.mytodos.splice（索引，1）；
}
}
}
});
新Vue({
el:“应用程序”，
render:function（h）{返回h（root{
道具：{todos:['text 1'，'text 2'，'text 3']}
}); 
}
});

代码很简单：根组件接收TODO（字符串）数组，使用子组件迭代它们，并通过props 单击顶部的“删除”按钮，您将看到结果-我希望有

信息：文本2待办事项文本：文本2

而是：

消息：文本1待办事项文本：文本2

根据我的理解，vue应该删除第一个元素，而保留其余元素。但实际上我有一些“混合”

---

你能解释一下为什么会发生这种情况，以及它是如何工作的吗

这是由于Vue试图“重用”DOM元素以最小化DOM突变。见：

您需要为每个子组件分配一个唯一的键：

v-bind:key=“Math.random（）”

例如，在现实世界中，密钥是从数据库中提取的ID

var child = Vue.component('my-child', {
    template: 
    '<div> '+
      '<div>message: <input v-model="mytodoText"></div>  <div>todo text: {{todoText}}</div>'+
      '<button @click="remove">remove</button>' +
    '</div>',
    props:['todoText'],
    data: function(){
        return {
        mytodoText: this.todoText
      }
    },
    methods: {
        remove: function(){
        this.$emit('completed', this.mytodoText);
      }
    }
});

var root = Vue.component('my-component', {
    template: '<div><my-child v-for="(todo, index) in mytodos" v-bind:index="index" v-bind:todoText="todo" v-on:completed="completed"></my-child></div>',
    props:['todos'],
    data: function(){
        return {
        mytodos: this.todos
      }
    },
    methods: {
        completed: function(todo){
        console.log(todo);
        var index = this.mytodos.indexOf(todo, 0);
        if (index > -1) {
            this.mytodos.splice(index, 1);
        }
      }
    }
});

new Vue({
  el: "#app",
  render: function (h) { return h(root, {
      props: {todos: ['text 1', 'text 2', 'text 3']}
    }); 
  }
});