$set解决 $delete 添加或删除属性 试图不更新问题

代码演示

    <template>
        <div>
            <ul>
                <li v-for="(item,index) in arr" :key="index">
                    <h3>{{item.title}}</h3>
                    <span>{{item.price}}</span>
                </li>
            </ul>
            <button @click="updateName">修改</button>
            <button @click="deleteName">删除</button>
        </div>
    </template>
    
    <script>
    //$set  $delete  试图不更新
    export default {
        name:"set",
        data(){
            return{
                arr:[
                    {title:"宝马"}
                ]
            }
        },
        methods:{
            updateName(){
                // this.arr[0].price = 2000;
                // this.arr = this.arr.slice(0)
                this.$set(this.arr[0],"price",2000)
                console.log(this.arr)
            },
            deleteName(){
                this.$delete(this.arr[0],"price")
            }
        }
    }
    </script>