[Vue警告]：渲染错误：“ RangeError：无效的数组长度” [Vue JS]

Question

我正在尝试使用此处提供的vue.js扑克示例-https://codepen.io/Rovak/pen/ExYeQar HTML看起来像

<div class="card-place">
        <card v-for="(card, index) in tableCards" :card="card"></card>
</div>

Vue JS的初始数据如下

let app = new Vue({
el: '.vue-container',
data: {
    player_playing: 0,
    playerCards: [],
    tableCards: [],
    players: [],.....},...
})

tableCards最初是空的，每当我通过websocket接收数据时，我都会使用以下方法更新tableCards

function placeTableCards(cardsOnTable) {
    app.tableCards = cardsOnTable
}

其中cardsOnTable是cards对象的数组。

更新时，出现如下错误

vue.js:1897 RangeError: Invalid array length

我对VueJS非常陌生，并坚持了很长时间。任何帮助将不胜感激。如果您需要我的更多数据，请告诉我。

Answer 1

这就像是一个反应错误。

您正在尝试onload遍历没有任何内容的数组。它为NULL。

您要做的是将for循环包装在if语句中，以确保仅在实际存在数据时运行它：

<div class="card-place" v-if="tableCards">
        <card v-for="(card, index) in tableCards" :card="card"></card>
</div>

或者您可以使用其中的某些内容初始化TableCards，但最好使用vueJs的反应性引擎。

一旦运行placeTableCards（），Vuejs应接​​管数据更改，if语句将通过，并执行循环。