Vue.js v-for循環數組無效（零元素長度不爲零）

我遇到了一個非常奇怪的問題：我有一個Vue組件，它顯示使用v-for的項目列表。偶爾列表將是空的，儘管數組中有20個項目。我甚至會打印數組的長度，並輸出20。我使用Vue.extend來定義一個自定義組件。以下是相關部分：Vue.js v-for循環數組無效（零元素長度不爲零）

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，但循環雖然行返回零項。

我加入一些調試語句vue.js在renderList(val, render)在線路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++) {。 val.length返回0，儘管數組中有20個項目。

來源

2017-03-22 Mark

您可以在小提琴/ codepen中複製問題嗎？ – Bert

嘗試添加「鍵，」你的「V-的」：

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

見v2.2.0：

當使用V-與組件，現在需要的一個關鍵。升級時，您可能會看到一堆「軟警告」，但這不會影響您的應用的當前行爲。

來源

2017-03-22 11:13:30 SLYcee

感謝您的輸入。我試過了鑰匙，但問題仍然存在。我用適當的v2.1.8和v2.2.0測試了這個。問題出現在3199行（v2.1.8）和3294（v2.2.0：'for（i = 0，l = val.length; i Mark

爲什麼使用「const」：const myComponent = Vue.extend（{}）;？也許這個const阻止變量的更新 – SLYcee

不，我不認爲這是原因，我實例化新組件與新的myComponent（）。它適用於大多數情況下，只有十分之一是長度爲0。 – Mark

Vue.js v-for循環數組無效（零元素長度不爲零）

回答

相關問題