Vue 数组中的对象属性更新 不触发视图更新

<template lang="pug">
 .account-cover
    table.search-result-list(cellspacing="0")
       tr
         th( @click=" checkedAllLine = !checkedAllLine")
           a(href="javascript:void(0);") 全选
         th.th-index 序号
         th 单号
         th 公司
         th 客户
         th 时间
         th 金额(元)
       transition(enter-active-class='animated fadeIn')
         tbody
           tr( v-for="(item,index) in orderList")
             td
               input( name="orderName" type="checkbox" v-model="item.orderCheck")
             td {{index+1}}
             td {{item.id}}
             td {{item.company}}
             td {{item.customer}}
             td {{item.time}}
             td {{item.amount}}
           tr
             td(colspan="9" v-if="ordertList.length === 0" align="center") 查无数据
</template>
<script>
 import { mapActions } from 'vuex'
 export default {
  name: "xxxxxxxxx",
  data() {
   return {
     checkedAllLine: false,
     visibleAlert: false,
     visibleAlertText: '',
     orderList:[
         {id:1,company:'toc',customer:'lily',
          time:'2021-03-03',amount:'500',orderCheck:false},
         {id:2,company:'toc',customer:'lily',
          time:'2021-03-03',amount:'500',orderCheck:false},
         {id:3,company:'toc',customer:'lily',
          time:'2021-03-03',amount:'500',orderCheck:false}
     ],
    }
  },
  created(){
   this.getDataList()
  },
  watch:{
    checkedAllLine:function(n,o){
     this.orderList.forEach(obj => {
       obj.orderCheck = n
     })
    }
  },
  methods :{
   ...mapActions(['visibleLoading', 'invisibleLoading']),
   getDataList(){
      .........................
   },
  }
 }
</script>
<style lang="scss" scoped>
</style>

通过全选来控制列表中checkbox,点击后checkedAllLine由 false变为 true,打印orderList 发现orderCheck也是true,但是列表中的checkbox并没有变化,视图没有更新。

看来数据层次太多,未能触发视图更新,可用以下几种解决办法:
1.在watch 中修改list后使用 this.$forceUpdate(); 强制更新 ;
2.将 checkedAllLine 绑定在  a( :data=“checkedAllLine” href="javascript:void(0);")   上,以checkedAllLine 的变化来触发视图更新。
3. watch 中 let list = JSON.parse(JSON.stringify(this.orderList)); this.accountList = [];list.forEach(obj => { obj.orderCheck = n }); this.accountList = list ,通过更改数组长度来触发视图更新。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值