美文网首页
uniapp中给data中的字段赋值,页面展示不生效(页面展示未

uniapp中给data中的字段赋值,页面展示不生效(页面展示未

作者: 霖深雾起不见你 | 来源:发表于2020-12-29 16:09 被阅读0次

    uniapp项目中经常需要在页面加载或者点击按钮的时候触发一些操作,或发起请求来改变一些字段的值,有时候会发现在请求获取到值赋值给data中字段以后,页面展示内容未能实时刷新,一般情况有两种可能。1:请求以后未成功赋值给字段;2:赋值给字段以后页面没有实时刷新,有思路以后寻找原因就有头绪了,以下针对两种情况进行分析解决

    1:请求以后未成功赋值给字段

    微信开发者工具中的AppData和console控制台是常用的两个工具,可以实时在AppData中查看页面中(注意应该无法查看到组件中的AppData,只能获取到页面的AppData)的data里面的字段信息的值是什么状态及变化,如果是查看组件中的赋值状态后面会提到,更简单的方法就是直接在赋值的前后console.log该字段看console出来的内容即可,这种情况一般都是ES5中this指向的问题,可以在方法开始的地方定义一个变量保存当前this指向,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象。this永远指向的是最后调用它的对象,也就是看它执行的时候是谁调用的,所以不同的场景就会有不同的指向问题,为了规避因this指向导致的赋值失败,可以在方便开端定义一个that保存当前this指向,后面逻辑中可以由that代替this。判断是否是这种原因造成的很简单,在赋值前后console或者debugger在控制台输出this和this.key(data中的变量)即可

    function : async function() {
        let that = this
        // 逻辑代码部分
        const json = await ********({
              method: 'POST',
              header: {
                'jwt': jwt
              },
              query: {
                time: new Date().getTime()
              }
            });
            if (json[1].data.code === 1000) {
              that.key = json[1].data.data.value 
            }
    }
    
    微信开发者工具AppData

    2.赋值给字段以后页面没有实时刷新

    判断是否是因为小程序未实时刷新引发的渲染错误的问题,可以通过查看AppData中的字段的值或者通过console、debugger等方式查看该时间节点data中的值有没有正常改变,如果data中的值正常改变页面的展示不对可以使用computed

    // template部分
    <button @click="takeCart" type="primary">
        {{ btnText === 0 ? '请选择尺码' : btnText == 1 ? '已售罄' : '加入购物袋' }}
    </button>
    
    // script部分
    computed: {
        storeName() {
    // 引用vuex,利用vuex存储字段
          return this.$store.state.storeName;
        },
        btnText() {
          // 本地data中的字段信息 因为当前项目中涉及到这个button的判断条件比较多比较复杂,所以拆分出一部分逻辑出来
          if (this.sizeIdx === -1 && this.sizeArr.length !== 0) {
            return 0;
          } else if (this.sizeIdx !== -1 && this.sizeArr[this.sizeIdx].qty == 0 || this.sizeArr.length == 0) {
            return 1;
          } else {
            return 2;
          }
          if (!this.colorName || (this.sizeIdx === -1 && this.sizeArr.length == 0)) {
            return false;
          } else {
            let bool = (this.sizeIdx === -1 && this.sizeArr.length !== 0) || this.colorPriceJson[this.colorName].totalQty == 0 ? true : false;
            return bool;
          }
        }
      },
    

    相关文章

      网友评论

          本文标题:uniapp中给data中的字段赋值,页面展示不生效(页面展示未

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