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

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

可以正常响应的


<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>
相关文章
|
2月前
|
JavaScript
vue学习(7)Object.defineProperty
vue学习(7)Object.defineProperty
36 2
|
5月前
|
JavaScript 前端开发 C++
Vue3视图渲染技术(1)
Vue3视图渲染技术(1)
42 0
Vue3视图渲染技术(1)
|
1月前
|
JavaScript
Vue 的响应式原理中 Object.defineProperty 有什么缺陷
Vue 的响应式原理主要依赖于 `Object.defineProperty`,但该方法存在一些缺陷:无法检测到对象属性的添加和删除,且对大量数据进行代理时性能较差。Vue 3 中改用了 Proxy 来解决这些问题。
|
4月前
|
JavaScript
Vue中ref创建_基本类型的响应式数据,在Vue2的年代,数据配在data里,Vue3的区别是不把响应数据写在data里,那个数据是响应式的用ref包一下,let name = ref(“张三“)
Vue中ref创建_基本类型的响应式数据,在Vue2的年代,数据配在data里,Vue3的区别是不把响应数据写在data里,那个数据是响应式的用ref包一下,let name = ref(“张三“)
|
2月前
|
JavaScript 前端开发 IDE
Vue学习笔记5:用Vue的事件监听 实现数据更新的实时视图显示
Vue学习笔记5:用Vue的事件监听 实现数据更新的实时视图显示
|
2月前
|
JavaScript 前端开发 API
Vue学习笔记4:用reactive() 实现数据更新的实时视图显示
Vue学习笔记4:用reactive() 实现数据更新的实时视图显示
|
25天前
|
JavaScript 索引
Vue中对象或数组数据更新但视图不刷新问题的解决策略
Vue中对象或数组数据更新但视图不刷新问题的解决策略
60 0
|
2月前
vue3 reactive数据更新,视图不更新问题
vue3 reactive数据更新,视图不更新问题
124 3
|
3月前
|
JavaScript UED
强制 Vue 重新渲染组件的5种方法,解决你开发过程中数据和视图无法同步的Bug。
强制 Vue 重新渲染组件的5种方法,解决你开发过程中数据和视图无法同步的Bug。
|
3月前
|
存储 JavaScript 前端开发
什么是 Vue 响应系统
【8月更文挑战第4天】什么是 Vue 响应系统
36 0
下一篇
无影云桌面