产生这个错误的原因是:vue模板渲染解析要比发请求要快,所以界面可以正常显示,但是还是会报错,在你第一次渲染时kingKongList列表就是空的。
但在小程序开发工具中是不报错的,原因是小程序编译之后的代码放到开发工具里加载,所以不会出现以上情况
解决方法:添加条件,有值的时候再渲染
v-if:添加删除
v-show:显示、隐藏DOM display:none
//index.vue
<template>
<view class="indexContainer">
<!--头部-->
<view class="header">
<image class='logo' src="/static/images/logo.jpg" mode=""></image>
<view class="search">
<text class='iconfont icon-sousuotianchong'></text>
<input type="text" value=""placeholder='搜索...'placeholder-class='placeholder'/>
</view>
<button type="default">张三张三</button>
</view>
<!--滑块-->
<scroll-view class='navscroll' scroll-x='true' >
<view class="navItem " :class="{active:navIndex==-1}" @click="changeIndex(-1)" >推荐</view>
<view class='navItem ':class="{active:navIndex==index}"@click="changeIndex(index)" v-if="indexData" v-for="(item,index) in indexData.kingKongModule.kingKongList":key="item.L1Id">{{item.text}}</view>
</scroll-view>
</view>
</template>
<script>
import request from '../../utils/request.js'
export default {
data() {
return {
indexData:{}, //首页数据
navIndex:-1,//点谁,谁高亮,导航的标记
}
},
onLoad() {
},
created(){
this.getIndexData();
},
methods: {
//获取首页数据
async getIndexData(){
//const res=await request('/getIndexData');//小程序
const res= await request('/api/getIndexData');//H5
console.log('========',res);
this.indexData=res.indexData;
},
//点击切换下标
changeIndex(index){
this.navIndex=index;
}
}
};
</script>
<style lang='stylus'>
.indexContainer
.header
display flex
padding 10rpx 5rpx
.logo
width 140rpx
height 50rpx
.search
width 420rpx
height 50rpx
background #f5f5f5
position relative
input
width 360rpx
height 60rpx
margin-left 60rpx
.placeholder
font-size 26rpx
color #333
.iconfont
position absolute
font-size 40rpx
left 4rpx
top 4rpx
button
width 144rpx
height 50rpx
line-height 60rpx
text-align center
font-size 27rpx
padding 0 4rpx
.navscroll
//不换行
white-space:nowrap
.navItem
display:inline-block
height:40rpx
padding:10rpx
font-size:26rpx
&.active
color:#BB2C08
border-bottom 3rpx solid #BB2C08
.test
color:red
</style>
这时候还是会出现问题,因为v-for比v-if的优先级要更高,还没有判断是否值为空就已经开始遍历了,所以v-if和v-for不能放在同一个标签上,应该把v-if提到父标签上去
老是出现以下错误
最好的解决办法是把所运行的浏览器的没必要的扩展插件该删的删就可以了