Vue.set 修改数组中的值

因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')

第一个参数是需要改变的数组，第二个参数要改变的数组下标，第三个参数改变后的值