Vue访问加载本地Json时,使用模版语法会遇到的小问题
这两天在公司做一个H5宣传页面,内容比较简单。
首先是通过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>复制代码