Javascript 更新输入'；编辑时的s绑定值

我正在编写一个基本的待办事项应用程序。每个待办事项/任务项在Vue

组件中作为输入项列出，并且

将显示一个v形，用于指向任务数组

我试图允许用户编辑每个任务输入，并在更改值后，让此命令更新数组项（而不仅仅是输入本身）。输入上的@change事件正在触发，但我不知道在这一点之后该做什么

HTML:

添加任务

JS:

Vue.component（'list-item'{
道具：['item'，'index']，
模板：`
`,
方法：{
completeTask:function（）{
此.emit（'task-completed'，此.index）；
},
deleteTask:function（）{
此.emit（'task-deleted'，此.index）；
},
updateTask:function（）{
console.log（'changed'）；
}
}
});
Vue.组件（“响应容器”{
模板：`
`
});
var app=新的Vue({
el:“.app”，
数据：{
任务：[]，
已完成的任务：[]，
新任务：“”
}, 
方法：{
addTask:function（）{
如果（此.IsThere文本）{
this.tasks.push（this.newTask）；
this.newTask=''；
这个.updateStorage（）；
}
},
completeTask:函数（索引）{
this.completedTasks.push（this.tasks[index]）；
这个.tasks.splice（索引，1）；
这个.updateStorage（）；
},
deleteTask:函数（索引）{
这个.tasks.splice（索引，1）；
这个.updateStorage（）；
},
updateStoreRage:function（）{
setItem（“tasks”，JSON.stringify（this.tasks））；
}
},
计算：{
isThereText:函数（）{
返回此.newTask.trim（）.length；
}
},
//如果本地存储中已经存储了任务，
//填充任务数组
挂载：函数（）{
if（localStorage.getItem（“任务”））{
this.tasks=JSON.parse（localStorage.getItem（“tasks”）；
}
}
});

您可以将索引和新值传递给更改事件处理程序：

<input class="task" :value="item" @change="updateTask(index, $event)">

在

组件上使用，而不是传入

项

属性。您还需要传入来自数组的引用（

tasks[index]

），因为此范围内的

task

是一个未绑定到数组元素的副本：

<list-item v-for="task, index in tasks" v-model="tasks[index]"></list-item>

---

• 正如Bert Evans提到的，即使这样做有效，Vue也要求使用

  v-for

  指令的组件也使用

  键

  属性（否则您将从Vue收到警告）：

• 另外，要意识到

  v-for

  范围中的

  index

  变量可能会更改，这意味着索引1处的项可能会更改为索引4，随着应用程序变得更加复杂，这可能会带来一些问题。更好的方法是将

  项

  存储为具有

  id

  属性的对象。这样，您就可以拥有与该项关联的不可变id

---

自定义组件需要钥匙。方法处理程序上的括号是多余的。此外，您还直接绑定到修改属性的

值@BertEvans为什么不使用
索引
？我知道文档中说需要
键
，但这不就是要绑定数据吗？我认为
v-model
规避了这一点。我得到了预期的结果，没有任何错误或警告。你不会得到警告，因为他使用的是Vue的生产verison。我们不断从使用
索引
作为组件变量的人那里得到问题。问题是
index
发生了变化，而
id
s没有变化。@BertEvans Ok，呼叫正确。我将更新我的答案以包括PSA@BertEvans，请等待您的第一条评论更改？
<input class="task" :value="item" @change="updateTask(index, $event)">

updateTask: function(index, event) {
    console.log(index);          
    console.log(event.target.value);  
}

<list-item v-for="task, index in tasks" v-model="tasks[index]"></list-item>

Vue.component('list-item', {
  props: ['value'],
  template: `<div class="task-wrapper">
    <input class="task" v-model="item" @change="updateTask"></div>
  </div>
  `,
  data() {
    return {
      item: this.value,
    }
  },
  methods: {
    updateTask: function() {
      this.$emit('input', this.item);
    }
  }
});

<list-item
  v-for="task, index in tasks" 
  :key="index"
  v-model="tasks[index]"
></list-item>