vue组件动态菜单出现很多 li

一、问题描述

点击左侧菜单栏，动态获取商品信息时，发现出现了很多空的 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 数据格式要注意，不能写错