我们都知道Vue是一个MVVM的框架,也就是通过数据模型驱动视图变化的,在实际项目中我们会发现,如果想改变视图展示(数据类),只需要修改Vue实例下的数据模型即可.但是当遇到数组的时候,直接通过下标修改数组的值,却发现视图并没有发生改变.但是通过console检查数据模型的时候又发现数据已经变化了.例如:
<template>
<div class="home">
<ul>
<li v-for="(item, index) in list" :key="index">{{item}}</li>
</ul>
<button @click="changeValue">改变</button>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import axios from 'axios'
export default {
name: 'home',
components: {
HelloWorld
},
data () {
return {
list: ['111', '222', '333']
}
},
methods: {
changeValue () {
this.list[1] = '999'
console.log(this.list[1])
}
}
}
</script>
这个例子,我们可以看到数据模型为list,是个array.通过for循环便利值到页面中,通过button调用changValue函数改变list[1]的值为string类型的999.而点击后,并没有改变视图的数据显示,为了校验是否修改成功,通过console校验,发现确实是修改了.这就是经常在项目中对数组操作不成功的情况,这个时候就要用到我们vue对象的set方法来改变数组的值
<template>
<div class="home">
<ul>
<li v-for="(item, index) in list" :key="index">{{item}}</li>
</ul>
<button @click="changeValue">改变</button>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import axios from 'axios'
export default {
name: 'home',
components: {
HelloWorld
},
data () {
return {
list: ['111', '222', '333']
}
},
methods: {
changeValue () {
console.log(this.list)
this.$set(this.list, 1, '999')
}
}
}
</script>
this.$set()改变数组,需要传入3个参数:
1.需要改变的数组变量
2.下标
3.改变的值
