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>
不会正常的响应
今天太晚了,明天我在写一写;休息一会
相关文章
- 【Vue 快速入门系列】解读MVVM模型、数据代理
- Vue 响应式总结
- Vue 条件渲染
- vue.js:哪些数组的方法是响应式的案例
- vue iframe嵌套外部网页
- vue中通过WeixinJSBridge关闭微信公众号当前页面,返回微信公众号首页
- vue中使用Object.assign导致视图不响应
- Vue 组件通信方式
- vue&&react项目更好实践
- Mac OS X下安装Vue脚手架(vue-cli)
- Laravel+vue实现history模式URL可行方案
- Vue核心⑤(监视属性)
- vue--响应式原理-核心函数
- 场景类:vue+iview实现三级导航
- vue Object.freeze之打破双向绑定 让对象不响应式更新
- vue.js将px转化为rem
- vue核心概念
- 使用vue.js模仿小米官网的作品
- vue——使用轮播组件swiper,设置 loop为true后,点击事件失效及轮播索引错乱问题