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>
相关文章
|
1月前
|
JavaScript 前端开发 开发者
Vue的事件处理机制提供了灵活且强大的方式来响应用户的操作和组件间的通信
【5月更文挑战第16天】Vue事件处理包括v-on(@)指令用于绑定事件监听器,如示例中的按钮点击事件。事件修饰符如.stop和.prevent简化逻辑,如阻止表单默认提交。自定义事件允许组件间通信,子组件通过$emit触发事件,父组件用v-on监听并响应。理解这些机制有助于掌握Vue应用的事件控制。
34 4
|
18天前
|
JavaScript
vue 请求拦截器 的响应拦截器有几种?
vue 请求拦截器 的响应拦截器有几种?
|
1月前
|
JavaScript
Vue : Object.defineProperty()
Vue : Object.defineProperty()
25 2
|
1月前
|
JavaScript 前端开发 API
Vue 监听器:让你的应用实时响应变化
Vue 监听器:让你的应用实时响应变化
|
1月前
|
缓存 JavaScript
在 Vue 组件中使用计算属性和侦听器来响应路由变化
【5月更文挑战第8天】Vue Router 中,计算属性和侦听器常用于根据路由变化更新组件状态。计算属性缓存依赖,当路由参数改变时自动更新,如示例中的 `userId`。侦听器则监听 `$route` 变化,执行相应操作,例如在 `currentUserId` 示例中响应 `userId` 更新。计算属性适合简单变化,而异步操作或复杂场景可选用侦听器。Vue 3 中,`watchEffect` 减少了部分侦听场景的复杂性。总之,它们用于组件内部响应路由变化,而非直接处理路由逻辑。
24 4
|
1月前
|
JavaScript 索引
vue 在什么情况下在数据发生改变的时候不会触发视图更新
vue 在什么情况下在数据发生改变的时候不会触发视图更新
35 2
|
1月前
|
监控 JavaScript
Vue中的数据变化监控与响应——深入理解Watchers
Vue中的数据变化监控与响应——深入理解Watchers
|
1月前
|
JavaScript 前端开发
Vue 中的 ref 与 reactive:让你的应用更具响应性(下)
Vue 中的 ref 与 reactive:让你的应用更具响应性(下)
Vue 中的 ref 与 reactive:让你的应用更具响应性(下)
|
1月前
|
JavaScript API
Vue 中的 ref 与 reactive:让你的应用更具响应性(中)
Vue 中的 ref 与 reactive:让你的应用更具响应性(中)
Vue 中的 ref 与 reactive:让你的应用更具响应性(中)
|
1月前
|
JavaScript 前端开发 数据处理
Vue 双向绑定:让数据与视图互动的魔法!(下)
Vue 双向绑定:让数据与视图互动的魔法!(下)
Vue 双向绑定:让数据与视图互动的魔法!(下)