Vue.js v-for 循环遍历数组不起作用(非零长度的零元素)
Posted
技术标签:
【中文标题】Vue.js v-for 循环遍历数组不起作用(非零长度的零元素)【英文标题】:Vue.js v-for looping over array not working (zero elements with non-zero length) 【发布时间】:2017-08-14 09:53:09 【问题描述】:我遇到了一个非常奇怪的问题:我有一个 Vue 组件,它使用 v-for
显示项目列表。尽管数组中有 20 项,但有时列表会为空。我什至打印了数组的长度,它会输出20
。
我使用Vue.extend
来定义一个自定义组件。以下是相关部分:
const myComponent = Vue.extend(
template:'<ul>\
<li >Length: contentRows.length </li>\
<li v-for="row in contentRows"> row </li>\
</ul>\ ',
data()
return contentRows: [],
,
created()
this.contentRows = this._loadContentRows()
,
methods:
_loadContentRows()
// Array of arrays, fetched from external source:
return this.dataSource.contentRows()
,
)
上面偶尔会生成以下无效的 html 输出(大约 10 个页面加载中的 1 个):
<ul>
<li >Length: 20</li>
<!-- MISSING LIST ITEMS HERE, note how length says 20... -->
</ul>
我的contentRows
数据属性的长度正确显示为20
,但循环虽然行返回零项。
我在 renderList(val, render)
第 3294 行 (v2.2.0) 向 vue.js 添加了一些调试语句
function renderList ( val, render)
var ret, i, l, keys, key;
if (Array.isArray(val) || typeof val === 'string')
ret = new Array(val.length);
console.log('reg length: ' + ret.length +
' val.length = ' + val.length + ' val: ' +
val + ' val.length = ' + val.length)
for (i = 0, l = val.length; i < l; i++)
ret[i] = render(val[i], i);
[...]
以上打印:
[Log] reg length: 0 val.length = 0 val: row1,row2,...row20, val.length = 0
注意长度如何为0,但有一个值。这怎么可能?
起初我以为可能是时间问题,val
的值在其他地方发生了更改,但我再次打印了长度、值和长度。奇怪的是,如果我在 renderList
函数的末尾打印 val.length,它会返回正确的值 20。
更新:
我可以用 v2.1.8 和 v2.2.0 重现这个。问题出在第 3199 (v2.1.8) 和 3294 (v2.2.0) 行:for (i = 0, l = val.length; i < l; i++)
。尽管数组中有 20 项,但 val.length 返回 0。
【问题讨论】:
你能在 fiddle/codepen 中复制这个问题吗? 【参考方案1】:尝试用你的“v-for”添加“key”:
<li v-for="(row, index) in contentRows" :key="'row' + index"> row </li>
见v2.2.0:
当对组件使用 v-for 时,现在需要一个键。升级时您可能会看到一堆“软警告”,但这不会影响您应用的当前行为。
【讨论】:
感谢您的意见。我尝试了密钥,但问题仍然存在。我使用 v2.1.8 和 v2.2.0 对此进行了测试。问题出在第 3199 行(v2.1.8)和第 3294 行(v2.2.0:for (i = 0, l = val.length; i < l; i++)
。尽管数组中有 20 项,但 val.length 返回 0。
为什么使用 "const" : const myComponent = Vue.extend(); ?也许这个 const 阻止了变量的更新。
不,我认为这不是原因。我用 new myComponent() 实例化新组件。它适用于大多数情况,只有十分之一的长度为 0。以上是关于Vue.js v-for 循环遍历数组不起作用(非零长度的零元素)的主要内容,如果未能解决你的问题,请参考以下文章
vue.js 中的v-for可以将遍历出来的值放入标签属性吗