vue 中数组中的某个对象的属性发生变化,视图不更新如何解决

95 阅读1分钟
<template>
    <div class="category">
            
            <div>
                <ul>
                    <li v-for="(item,index) in obj" :key="index">
                        {{item}}
                    </li>
                </ul>
                <button @click="addobj">按钮</button>
                
            </div>
            <ul>
                <li v-for="(item,index) in arr" :key="index">
                    {{item}}
                </li>
            </ul>
            <button @click="addarr">按钮</button>
    </div>
</template>

<script>

export default {
    name:"category",
    data(){
        return{
            obj:{a:"集运",c:"哈哈"},
            arr:["前端","大数据"]
        }
    },
    methods:{
        addobj(){
            // this.$set(this.obj,'b','全栈');
            this.obj=Object.assign({},{...this.obj,b:'全栈'});
        },
        addarr(){
            this.$set(this.arr,2,'UI');
            // this.arr = Object.assign([],[...this.arr,'UI']);
            // this.arr.push('UI')
        }
    }
}
</script>