老师检查一下
来源：2-14 编程练习
vivi_li
2020-07-07 15:14:23
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>component子组件数据绑定</title>
</head>
<script src="vue.js"></script>
<body>
<div id="app">
<input type="text" v-model="inputValue">
<button @click="addHandelClick">添加</button>
<ul>
<todo-list v-for="(item,index) in list" :content="item" :index="index" @delete="addValue">
</todo-list>
</ul>
</div>
<script>
let TodoList = {
props: ['content','index'],
template: '<li @click="triggerAdd">{{content}}</li>',
methods: {
triggerAdd() {
this.$emit('delete', this.index)
}
}
};
let app = new Vue({
el: '#app',
components: {TodoList: TodoList},
data: {
list: [],
inputValue: ''
},
methods: {
addHandelClick() {
if (this.inputValue.trim().length === 0) return;
this.list.push(this.inputValue);
this.inputValue='';
},
addValue(index) {
let newValue=Number(this.list[index])+1;
this.list.splice(index,1,newValue);
}
}
});
</script>
</body>
</html>
data里面list数据好像无法通过直接赋值的方式进行修改，另外v-for 里面的循环出来的item 以及index 我试了一下 跟命名没有关系 跟顺序有关 希望老师可以讲一下关于Vue报错如何快速确认位置，发现不太容易处理错误
2回答
-
好帮手慕夭夭
2020-07-07
同学你好，没错，可以这样理解。祝学习愉快~
0 -
好帮手慕夭夭
2020-07-07
同学你好，问题解答如下：
1.代码实现正确。
2.直接赋值是指用等号的方式吗？即通过数组下标的方式添加数组元素（arr[i]=xxx）？这是因为vue自身的原因：vue中，数组下标的方式没有数据响应式。也就说，list是添加了新的内容，只不过页面没有改变。可以特殊记一下。
3.理解的没错。item,index是形参名，就类似我们定义一个变量一样，名字叫什么都是自己起的。而v-for中是根据参数的位置一一对应它具体的含义。第一个位置的参数表示元素，第二个表示当前元素的索引。
4.看报错信息即可，后面会标注代码的位置。这里老师认为制造了一个错误：
list前面的this去掉了，报错信息如下，可以找到具体的位置：
当然了，有一些报错，可能位置也不太准确。这个时候只能根据报错的意思去查找相关的代码，例如上面说的list没有定义，那么我们就找到代码中，使用list的代码进行检查。这个排查过程还是要靠自己慢慢积累，别着急。有问题先自己试着排查，如果不懂可以在问答区提问，老师会有针对性的为你指导。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0h020-07-07
相似问题