因JavaScript规则 我们无法在vue中通过这样
this.outdata[0]='ddd'
去改变数组中下标的值,页面不会触发更新
所以此时要改变就需要用到 Vue.set
上demo
<template>
<div class="hello">
<h1>vue.set</h1>
<!--<p>{{outdata.count}}</p>-->
<ul>
<li v-for="item in outdata">{{item}}</li>
</ul>
<button @click="handleChange">点击改变</button>
</div>
</template>
<script>
import Vue from 'vue'
// var outdata={
// count:1,
// goods:"car",
// };
var outdata2=['aaa','bbb','ccc']
export default {
name: 'demo2',
data(){
return{
outdata:outdata2,
}
},
methods:{
handleChange(){
//this.outdata[0]='ddd'
//console.log(this.outdata[0]) //ddd
Vue.set(this.outdata,0,'ddd')
//如果是json数组 这么修改
Vue.set(this.items, 0, {message:"Change Test",id:'10'})
}
}
}
</script>
<style scoped>
li{
list-style: none;
}
</style>
目的是点击button改变数组第一项的值:将aaa改为ddd
可以看到在this.outdata[0]='ddd' 时aaa已经变成了ddd
但是并没有触发视图更新
使用Vue.set(this.outdata,0,'ddd')
第一个参数是需要改变的数组,第二个参数要改变的数组下标,第三个参数改变后的值