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

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;
      }
    }
  },