时间戳

首页 > 解决方案 > [Vue 警告]：渲染错误：“RangeError: Invalid array length”[Vue JS]

javascript - [Vue 警告]：渲染错误：“RangeError: Invalid array length”[Vue JS]

问题描述

我正在尝试使用此处提供的 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是空的，每当我通过 websockets 接收数据时，我都会tableCards使用以下方法更新

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

其中cardsOnTable 是一个卡片对象数组。

更新时出现如下错误

vue.js:1897 RangeError: Invalid array length

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

标签： javascriptvue.js

解决方案

这感觉像是一个反应性错误。

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

您想要做的是将您的 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 语句将通过 true，并且您的循环应该执行。

推荐阅读