zl程序教程

您现在的位置是:首页 >  前端

当前栏目

vue中使用Object.assign导致视图不响应

Vue响应 视图 object 导致 assign 使用
2023-09-27 14:22:17 时间

可以正常响应的

<template>
    <div>
       <ul>
           <li class="li-item" v-for="(item,index) in list" :key="index" @click="hander(item)">
               {{item}}
           </li>
       </ul>
    </div>
</template>
<script>
   export default {
        data(){
            return{
                list:[]
            }
        },
        created(){
            setTimeout(()=>{
                let  arr=[
                    { name:'张三1',flag:true},
                    { name:'张三2',flag:true},
                    { name:'张三3',flag:true},
                    { name:'张三4',flag:true},
                ]
                let newList=[];
                for(let i=0;i<arr.length;i++){
                    let item=arr[i];
                    console.log(item)
                    let a=Object.assign(item,{'select':true});
                    newList.push(a)
                }   
                this.list=newList;
            },300)
        },
        methods:{
            hander(mess){
               for(let i=0;i<this.list.length;i++){
                    if(mess.name==this.list[i].name){
                       this.list[i].select=! mess.select;
                    }
               }
            },
        },
    }
</script>
<style scoped>
.li-item{
    height: 40px;
    background: #c0c0cc;
    line-height: 40px;
    margin-bottom: 10px;
}
</style>

不会正常的响应

今天太晚了,明天我在写一写;休息一会