我是靠谱客的博主 从容小松鼠，最近开发中收集的这篇文章主要介绍vue之el-col栅格组件使用v-for循环添加&& v-if避免初始化报错”xxx“ undefined，觉得挺不错的，现在分享给大家，希望可以做个参考。
概述
需求&问题
做一个展示页面，有四张卡片显示在同一行，卡片可点击跳转到详情页。一开始是用el-col写了四个，考虑到后期可能更多卡片，所以准备用v-for循环遍历list对象数组来添加卡片。
顺带提一句，使用el-col是为了定义屏幕自适应，不同屏幕尺寸下一行显示几张卡片。
代码
<el-row :gutter="40" style="margin-top: 30px" > <!--分栏间隔-->
<el-col :xs="12" :sm="12" :md="12" :lg="6" class="card-col" v-if="list" v-for="(pc, i) of list" > <!--共24份，xs超小型设备，sm小屏设备，md中屏，lg大屏-->
<pc-card :name="pc.name" :ip= "pc.ip" />
</el-col>
</el-row>
...
data() {
return {
list: [],
}
}
解释
v-if：由于异步请求数据，初始化页面时list数组尚且为空，此时浏览器控制台会报错undefined；之后数据加载正常渲染。这里主要解决浏览器控制台报错的问题。
参考1
参考2
v-for： 循环遍历list对象数组，每一个对象是一个卡片。
详细信息参考大佬博客，总结的很全面：
vue之v-for指令
最后
以上就是从容小松鼠为你收集整理的vue之el-col栅格组件使用v-for循环添加&& v-if避免初始化报错”xxx“ undefined的全部内容，希望文章能够帮你解决vue之el-col栅格组件使用v-for循环添加&& v-if避免初始化报错”xxx“ undefined所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复