Vue访问加载本地Json（渲染模版数据）时遇到的坑，报undefined

Vue访问加载本地Json时，使用模版语法会遇到的小问题

这两天在公司作

经过axios得到到的json ?

html（部分）?

<section class="box3" @click="aside=true">
    <img src="./assets/img/box3.png">
    <div class="words">
        <span class="type">{{res[2].name}}</span>
        <span class="type_price"><span>{{res[2].copies_coin}}</span>USDT/份</span>
        <span class="tips">含{{res[2].copies_amount}}YCC/份</span>
        <span class="year">预计年化产率{{res[2].annual_yield}}%</span>
        <span class="fix1">预计产量</span>
        <span class="fix2">(YCC/天)</span>
        <span class="num">{{res[2].basic_yield}}</span>
        <span class="num_up">+{{res[2].presented_yield}}</span>
    </div>
</section>

Data()?

data(){
        return{
            datas:'',
            res:'',
        }
    },

methods()?

getData(){
    let url = 'http://192.168.33.200/pre-cloud-miner.json'
    ajax(this,url,'',(response)=>{
        this.datas = eval('('+response+')');
        this.res = this.datas[90];
        console.log(this.res[0].name)
    },"GET")
}

结果console.log显示A090，正确，可是却报错：

神奇的是页面也正常渲染了：

若是把name删掉，就会报下一个：copies_coin的错，依次类推

网上查询发现缘由是获取本地json文件是异步操做，一开始res为' '空字符串，因此会报res.name为undefined。解决办法有两种：

1 . 初始定义res时，就把属性设置好，不要作空字符串或者是空对象，空数组。

res:[{},{},{}],        //由于后台返回的数据格式就是这样，这样再刷新页面就不会报错了

2 . 用v-if解决：

<div class="words" v-if="res[2]">
    <span class="type">{{res[2].name}}</span>
    <span class="type_price"><span>{{res[2].copies_coin}}</span>USDT/份</span>
    <span class="tips">含{{res[2].copies_amount}}YCC/份</span>
    <span class="year">预计年化产率{{res[2].annual_yield}}%</span>
    <span class="fix1">预计产量</span>
    <span class="fix2">(YCC/天)</span>
    <span class="num">{{res[2].basic_yield}}</span>
    <span class="num_up">+{{res[2].presented_yield}}</span>
</div>