vue数组循环在实际使用中的一个有趣现象

#每日一学#
今日又是一个新问题
vue 中 使用 v-for 循环数组时我们如果用了 input输入框,然后如果动态改动了数组内容,会有些有趣的现象产生。
因为用到了 vue 我们首先说一个 vue 的数组使用问题:

1. 数组在变更的时候用到 `push()` `splice()` 等,这是由于 `vue` 的实现机制决定的,不做特殊说明(其实我也忘了到底因为 property 还是因为什么其他原因,大家可以自行去 `vue` 官网查询)
2. 因为1的原因,比如你使用 `a[1]=1` 会发现不生效
3. 数组有三种形式 
    
1
2
3
[1,2,3,4]
[{code:1},{code:2}]
[{code:1},2]

了解了以上的内容我们来一个示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<ul id="app">
<li>循环一 codes =[1,2,3]</li>
<li @click="addCode">增加1</li>
<li v-for="code in codes"><input v-model="code"></li>
<li>循环二 codes=[{code:1},{code:2}}]</li>
<li @click="addCode2">增加2</li>
<li v-for="code in codes2"><input v-model="code.code"></li>
<li @click="showCodes">控制台查看数据</li>
</ul>

let app = new Vue({
el:"#app",
data:{
codes:[],
codes2:[]
},
methods:{
addCode(){
this.codes.push(this.codes.length);
},
addCode2(){
this.codes.push({code:thist.codes.length});
},
showCodes(){
console.log('codes',this.codes);
console.log('codes2',this.codes2);
}
}
})

问题产生了 我们点击增加 点击后都会增加一个input显示,但是

jsfinddle 例子

看图片也是可以的

可以点击试试,你会发下

  1. 每次点击增加1 然后修改1循环中的任一项内容,再次点击增加1都会将数据重置一遍
  2. 每次点击增加2 然后修改2循环中的任一项内容,再次点击增加2并不会重置数据
  3. 修改了1循环中的内容,然后,点击控制台查看数据,可以在控制台发现 codes 数组并没有更改
  4. 修改了2循环中的内容,然后,点击控制台查看数据,可以在控制台发现 codess 数组已经改变

以上只是验证了一开始要大家了解的第一点,因为在 input 中修改时相当于操作
codes[1]=1 这个操作在 vue 中并不会被监控到


后续反馈
coding 的网友@hee93 提醒如果使用以下方式也是可以自动绑定的
jsfiddle示例

区别部分在于html 部分的v-model

1
<li v-for="(code,k) in codes"><input v-model="codes[k]"></li>

  • Post author: hainuo
  • Post link: vue_array_vFor
  • Copyright Notice: All articles in this blog are licensed under BY-NC-SA unless stating additionally.