Question

我遇到了一个非常奇怪的问题：我有一个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++) {。 val.length返回0，尽管数组中有20个项目。

Answer 1

尝试添加＆＃34;键＆＃34;用你的＆＃34; v-for＆＃34; ：

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

请参阅v2.2.0：

将v-for与组件一起使用时，现在需要一个键。您可能会看到一堆＆＃34;软警告＆＃34;升级时，但这不会影响应用的当前行为。

Vue.js v-for循环数组不工作（零元素长度非零）

1 个答案: