vue2.0动态设置属性后数据更新，视图不更新问题；Vm.set(target,key,value)（即可解决）

ゝ一世哀愁。 2022-11-10 00:54 265阅读 0赞

公司接了个项目前端；需要用到列表的倒计时的功能；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjg3MTIz_size_16_color_FFFFFF_t_70]  
倒计时功能的实现思路是：  
1、全局一个定时器  
2、然后根据需要倒计时的列进行倒计时；（全局每秒执行一次，把需要倒计时的列倒计时）  
3、然后再更新列表数据；

遇到数据更新数据不更新的问题时，就要考虑到新增的属性没有双向绑定；  
vm.set(target,key,value);//这是vue为动态添加的属性提供的解决方式，原理还是object.definePorperty()这个语法，这个语法vue原理基础和关键  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjg3MTIz_size_16_color_FFFFFF_t_70 1]

上面代码就是关键了，设置对象的key为双向绑定，此时数据更新（会更新视图）或者是视图更新（会更新数据）；

具体部分关键代码：  
js：

//定时读秒初始化
        timeLimitInit() { 
          let _this = this;
          let t = setInterval(() => { 
            for (var i in _this.timeLimitKV) { 
              let k = "" + i;//转字符
              let s = _this.timeLimitKV[k]
              if (s < 1) continue;
              s = s - 1
              _this.timeLimitKV[k] = s
              //console.log("秒数:" + k + ":" + _this.timeLimitKV[k])
              //这里的设置可以设置动态添加的属性实现双向绑定（这里是关键）
              _this.$set(_this.timeLimitKV, k, s)
              if (s == 0) { 
                _this.timeEndNoticeItem(k)
                // delete _this.timeLimitKV[k]
              }
            }
          }, 1000)
        },
        //到时间了回调
        timeEndNoticeItem(k) { 
          let _this=this;
          console.log("回调" + k)
          let mRID=k.replace("time","")
          let tf = _this.$store.commit("autoGrabOrder", mRID);
          console.log(k+"抢单到时了，自动变为待接单状态："+tf)
        },
        //设置需要倒计时的单子
        lunxunSetTimeout(item) { 
          let statu = item.procCode
          if (statu == '01') { 
            let key = "time" + item.mRID
            if (!this.timeLimitKV[key] && !this.timeLimitKV[key] != 0)
              this.$set(this.timeLimitKV, key, this.timeLimitSecond)
          }
        }

template的部门html代码：

<div class="mlist" v-for="(item,index) in list" :key="index">
          <template v-if="lunxunSetTimeout(item)"></template>
          <div class="mtop">
            <div class="mfl" @click="pointToCenterFun(item)">
              <div class="order-tip-div order-tip-pu" v-if="item.isNormalCustomer == 1">普</div>
              <div class="order-tip-div order-tip-mei" v-if="item.isMei == 1">媒</div>
              <div class="order-tip-div order-tip-min" v-if="item.isMin == 1">敏</div>
              {
       { item.repairsListId }}
            </div>
            <div class="mfr">
              <button @click="operateClick(item)" :class="item.procCode|blackgoundFilter">
            
                {
       { $options.components.orderUtil.methods.getOrderStatuName(item.procCode) }}
                <span v-if="item.procCode=='01'">
                ({
       { timeLimitKV['time' + item.mRID] }})
              </span>
              </button>
    
            </div>
          </div>
          <div class="line"></div>
          <div class="mbottom">
            <div class="mfl"><span class="span1">故障描述：</span><span class="span2">{
       { item.cause }}</span></div>
            <div class="mfr">
              <router-link :to="{path:'/workorder/detail/'+item.mRID, query: {id:item.mRID}}">查看详情</router-link>
            </div>
          </div>
        </div>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjg3MTIz_size_16_color_FFFFFF_t_70]: /images/20221023/c796d3463d2248ffa8a9eb1c74f32596.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjg3MTIz_size_16_color_FFFFFF_t_70 1]: /images/20221023/0072c10c24c74f60b6754fb1bd3c15f8.png