Vue中v-for渲染的个数不对

Question

1.代码如下

运行后num打印为10

可是渲染出来只有两个li

2.但是若将代码改一下

就能渲染出10个li

3.为什么没改之前不能正确打印出10个li,而是打印的2个li?

Answer 1

v-for这里写的有问题，既然是循环数字，就不要加 idx
否则vue会认为你这里循环的是对象或者数组
this.data赋了值
this.data.num1 有两个属性 getter 和 setter
所以循环的时候是当做对象在循环这两个属性了

Answer 2

你别在mounted钩子调用 你在组件创建之前调用这个函数beforeCreate 调用this.getData()

你这个sum他是变了值 只不过在数据挂载之后变的值 mounted 是挂载完成之后调用的生命钩子函数

Answer 3

this.data.num1 是字符串吧？检查下