一、问题描述
点击左侧菜单栏,动态获取商品信息时,发现出现了很多空的 li 标签(异常的多),没有获取到 img 和 p 标签内容,如图所示
二、问题原因及解决方法
目前找到两种原因,本质原因都是没有获取到 json 数据
1、一是没有写入相关 json 文件引用,只需写入引用即可(补充完整 if 语句)
调错前:
data(){
var _this=this;
var url="";
if(_this.goodsID==0){
url="json/phone.json";
}
// 获取写好的json数据
this.axios.get(url).then(function(res){
_this.list=res.data;
})
return{
list:[]
}
}
调错后:
data(){
var _this=this;
var url="";
if(_this.goodsID==0){
url="json/phone.json";
}else if(_this.goodsID==1){
url="json/computer.json";
}else if(_this.goodsID==2){
url="json/phone.json";
}else{
url="json/other.json";
}
// 获取写好的json数据
this.axios.get(url).then(function(res){
_this.list=res.data;
})
return{
list:[]
}
}
2、二是没有配置 json 文件,只需添加对应的 json 文件并写入相关 if 语句引用即可
因为做的 demo li 较多,就只写了一部分的 json 文件(computer.json和phone.json),因此导致后面没有写的部分出错,添加 other.json 用于其他情况,即可解决问题
3、相关补充
(1)json 不允许有注释,因此若是 axios 引用中出现注释,则项目会报错
(2)json 数据格式要注意,不能写错