gpt4 book ai didi

javascript - Vue.js v-for 数组上的循环不起作用(零元素,非零长度)

转载 作者:太空宇宙 更新时间:2023-11-04 15:53:11 24 4
gpt4 key购买 nike

我遇到了一个非常奇怪的问题:我有一个 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 输出(大约十分之一的页面加载):

<ul>
<li >Length: 20</li>
<!-- MISSING LIST ITEMS HERE, note how length says 20... -->
</ul>

我的contentRows的长度data 属性正确显示为 20 ,但循环行返回零项。

我在 renderList(val, render) 中向 vue.js 添加了一些调试语句在第 3294 行(v2.2.0)

 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。

最佳答案

尝试将“key”与“v-for”一起添加:

<li v-for="(row, index) in contentRows" :key="'row' + index">{{ row }}</li>

参见v2.2.0 :

When using v-for with a component, a key is now required. You will likely see a bunch of "soft warnings" when you upgrade, but this does not affect the current behavior of your app.

关于javascript - Vue.js v-for 数组上的循环不起作用(零元素,非零长度),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42949016/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com