v-for循环空数组返回undefined

本文章采用 1.1版本的vue.js和 2.6版本的vue.js进行解决该问题

1.1版本的vue.js

1.1版本的vue.js不存在v-for循环空数组或空对象返回undefined的问题且该版本的vue.js还可以使用$index,$key

HTML代码

<div id="box"> <ul> <li v-for="item in myData">{{item}}{{$index}}</li> </ul> </div>

JavaScript代码

<script src="./vue-1.1/vue.js"></script> <script> new Vue({ el: '#box', data: { myData: [ 'apple', 'banana', 'orange' ] } }) </script>

运行结果图 数据数组为空时，运行结果 什么都没有，即 1.1版本的vue.js根本不存在v-for循环空数组或空对象返回undefined的问题

2.6版本的vue.js

2.6版本的vue.js存在v-for循环空数组或空对象时，返回undefined的问题且该版本不能使用$index, $key（$key返回对象的属性名）

HTML代码

<div id="box"> <ul> // 1.1版本的vue.js也可以使用这种方法循环访问索引、属性名 <li v-for="(item, key, index) in myData">{{item}}-{{key}}-{{index}}</li> </ul> </div>

JavaScript代码

<script src="./vue-1.1/vue.js"></script> <script> new Vue({ el: '#box', data: { myData: { name:'blue', age:22 } } }) </script>

运行结果图 数据对象为空时，运行结果 虽然返回undefined，但是并没有渲染上去，下面这种情况就渲染上去了

HTML代码

<link rel="stylesheet" href="lib/bootstrap.min.css"> <script src="lib/jquery-1.7.2.js"></script> <!-- bootstrap.js 依赖于 jQuery --> <script src="lib/bootstrap.js"></script> <script src="./vue.js"></script> <table class="table table-bordered table-hover"> <caption class="h3">用户信息表</caption> <tr class="text-danger"> <th class="text-center">序号</th> <th class="text-center">名字</th> <th class="text-center">年龄</th> <th class="text-center">操作</th> </tr> <tr class="text-center" v-for="(item, index) in myData" :key="index"> <td>{{index + 1}}</td> <td>{{item.name}}</td> <td>{{item.age}}</td> <td> <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer">删除</button> </td> </tr> <tr v-show="myData.length !== 0"> <td colspan="4" class="text-right"> <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer">删除全部</button> </td> </tr> <tr v-show="myData.length === 0"> <td colspan="4" class="text-center text-muted"> <p>暂无数据...</p> </td> </tr> </table>

JavaScript代码

<script> window.onload = function () { new Vue({ el: '#box', data: { name: '', age: '', myData: [] } }) } </script>

运行结果图 其解决方法是如下 <tr v-if="myData.length !== 0" class="text-center" div(v-for="(item, index) in myData" :key="index")> 在循环体中添加v-if 且 在v-for外层套上div 运行结果如下： 虽然不知道这是什么原理，但是总结起来就是：

1.1版本的vue.js可以使用$index，$key，2.6版本的不可以1.1版本的vue.js，v-for循环空数组或空对象，不会返回undefined，2.6版本的会返回2.6版本的返回的undefined会不会渲染到页面上，可能跟Bootstrap，jquery有关，解决办法就是加v-if 且 在v-for上外套div，但是该方法不可取，一旦数组或对象不再为空，就不能遍历该数组或对象了，应该是采取computed计算属性和数组的filter方法来解决。