美文网首页
【经验分享】VUE中对象属性发生变化以后,页面没有更新,使用强制

【经验分享】VUE中对象属性发生变化以后,页面没有更新,使用强制

作者: 度一特 | 来源:发表于2020-09-29 22:57 被阅读0次

    概要

    本文是自己编写项目的时候,遇到更新对象以后,Vue页面不变化的情况。在找了一堆资料并且各种频繁测试后,才发现要使用forceUpdate的情况。

    这个情况虽然很小,但是如果没有遇到类似问题,切实会耽误很多时间,故而分享给大家,希望对大家能有帮助。

    分享的知识点包括:

    1. 对从数据库取得的数组,增加新的属性
    2. 通过新的页面实现选中和不选中的效果(在v-for的具体事例)

    场景

    在弹出的图片选择层,选择图片后,并进行高亮提示,如图:

    设计思路
    1. 使用ajax取得图像数组
    2. 为每个数组设置属性choose
    3. 使用v-for循环图片
    4. 设置点击事件,如果点击,设计值choose = 1,选中;页面更新
    具体代码
    1. 使用ajax取得图像数组,事例中的数组为“this.materials”
    2. 为每个数组设置属性choose,需要for循环,增加属性choose
       this.$axios(`/api/material/list`)
            .then(res => {
              this.materials = res.data;
    
              // 为每个对象设置choose属性
              for (let n1 = 0; n1 < this.materials.length; n1++) {
                if (typeof this.materials[n1].choose === "undefined") {
                  this.materials[n1].choose = 0; 
                }
              }
    
              console.log(res.data);
            })
            .catch(err => {
              console.log(err);
            });
    
    1. 使用v-for循环图片
      此代码中的样式等,已经去掉,避免干扰,只留下主要代码。
      重要代码为
      :class="[{ 'border-red-500': item.choose }, { 'opacity-75': item.choose }]"
    <div v-for="(item, index) in this.materials" :key="index" class="..." @click="chooseGoodswipe(index)">
                <div
                  :style="'width:100px;height:100px;background-image: url(' + $oss + '/' + item.url + ')'"
                 :class="[{ 'border-red-500': item.choose }, { 'opacity-75': item.choose }]"
                ></div>
    
                <div>{{ item.name }}</div>
              </div>
    
    1. 设定点击事件,更新choose属性,注意最后用到了“ this.$forceUpdate();”
      chooseGoodswipe(index) {
          if (this.materials[index].choose === 1) {
            // 取消选择
            this.materials[index].choose = 0;
          } else {
            // 选择
            this.materials[index].choose = 1;
          }
          // this.$forceUpdate();
        },
    

    如果没有this.$forceUpdate()页面是没有任何变化的。

    原因

    因为数据对象的层级较多,导致不会触发render事件,页面也就不会变化。

    解决方案

    在设计到两级,或者中途修改了属性的,都会导致页面不会自动更新。如果你发现页面乜有更新,那么就强制更新就行了。

    备注

    在使用数组、对象、以及需要多次赋值的时候,页面的更新是非常头疼的问题,经常会各种问题频发。这种情况,调试的时候一定要有耐心,多去调试,就能更加深刻的理解Vue的render机制。

    相关文章

      网友评论

          本文标题:【经验分享】VUE中对象属性发生变化以后,页面没有更新,使用强制

          本文链接:https://www.haomeiwen.com/subject/lhyyuktx.html