js中的异步问题

今天遇到了一个问题,在vue中,我有多个产品共用一个组件,但是产品名不同,支持的平台也不同,所以想到用product接收对应的产品名,v-if来判断是否显示平台

通过路由的props来接收对应的product,
在vue组件的data中,有prices这个对象,通过调用接口来接收后台传来的参数,显示每个产品有哪些平台,每个平台对应的价格

代码如下:

props:["product"],
 data() {
    return {
      platform: "Windows",
      support: 1,
      period: -1,
      proc: "",
      prices: {},//prices是要操作的数据对象
      price: {
        price: 0,
        productPrice: 0,
        supportPrice: 0
      }
    };

在mounted中调用接口获取后台传来的数据

 mounted() {
    $.post('/order/prices').then(data => {
      this.prices = data||{};
      console.log(this.prices)
    })
    this.calculate(); 
  },

打印出来的结果如下

于是用v-if判断

<el-radio-group v-model="platform">
                    <el-radio-button label="Android" v-if="this.prices[this.product].Android"><i class="fa fa-android"></i> Android</el-radio-button>     
                    <el-radio-button label="Windows" v-if="this.prices[this.product].Windows)"><i class="fa fa-windows"></i> Windows</el-radio-button>     
                    <el-radio-button label="iOS" v-if="this.prices[this.product].iOS"><i class="fa fa-apple"></i> iOS</el-radio-button>                      
                </el-radio-group>

结果的确有效果,但是控制台却报错了

这个错误是引用的对象是undefiend,但是控制台的确打印出了接口返回的数据,于是我又打印了一次试试,这次把打印的代码放到了调接口方法的外面

 mounted() {
    $.post('/order/prices').then(data => {
      this.prices = data||{};
      console.log(this.prices)  
    })
    this.calculate();
      console.log(this.prices)     
  },

结果这次打印出了一个空对象,一个有数据的对象,而且空对象先打印

仔细一想,仅仅是把打印的代码放到了外面,就打印了空对象,应该是js中的异步问题,ajax请求无疑是异步的,而代码执行的速度却很快,应该是先执行了打印prices这个原data中的空对象,等到请求结束之后,才接收后台传来的数据,此时再打印出完整的数据.

看到这种情况,v-if为什么会报错的原因也清楚了,因为v-if代码执行的时候,prices还是个空对象,所以会出现引用为undefined的情况,
于是对代码进行修改

<el-radio-group v-model="platform">
                    <el-radio-button label="Android" v-if="this.prices[this.product]&&this.prices[this.product].hasOwnProperty('Android')"><i class="fa fa-android"></i> Android</el-radio-button>     
                    <el-radio-button label="Windows" v-if="this.prices[this.product]&&this.prices[this.product].hasOwnProperty('Windows')"><i class="fa fa-windows"></i> Windows</el-radio-button>     
                    <el-radio-button label="iOS" v-if="this.prices[this.product]&&this.prices[this.product].hasOwnProperty('iOS')"><i class="fa fa-apple"></i> iOS</el-radio-button>
                    <el-radio-button label="Linux" v-if="this.prices[this.product]&&this.prices[this.product].hasOwnProperty('Linux')"><i class="fa fa-linux"></i> Linux</el-radio-button>   
                    <el-radio-button label="ARM" v-if="this.prices[this.product]&&this.prices[this.product].hasOwnProperty('ARM')"><i class="fa fa-laptop"></i> ARM</el-radio-button>                          
                </el-radio-group> 

总算解决了报错的问题