Question

我创建了基本的jsfiddle here。

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']}
    }); 
  }
});

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

message：text 2 todo text：text 2

，而是：

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

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

您能解释一下它为什么会发生以及它是如何工作的？

Answer 1

这是因为Vue尝试重复使用＆＃34; DOM元素以最小化DOM突变。请参阅：https://vuejs.org/v2/guide/list.html#key

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

$('.btn').on('click', function(e) { if( $(this).prop('disabled') == true) { $(this).attr("href","javascript:void(0);"); } $(this).prop('disabled',true); });

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

为什么在使用v-for时Vue中的值无法正确更新？

1 个答案: