Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I am attempting to play with the sample of vue.js poker sample available here - https://codepen.io/Rovak/pen/ExYeQar The HTML looks like

<div class="card-place">
        <card v-for="(card, index) in tableCards" :card="card"></card>
Initial data of Vue JS looks like
let app = new Vue({
el: '.vue-container',
data: {
    player_playing: 0,
    playerCards: [],
    tableCards: [],
    players: [],.....},...
Initially the tableCards is empty, whenever I am receiving data via websockets, I am updating the tableCards using the below method
function placeTableCards(cardsOnTable) {
    app.tableCards = cardsOnTable
where cardsOnTable is an array of cards object. 
On updation I am getting an error as follows
vue.js:1897 RangeError: Invalid array length
I am extremely new to VueJS and stuck on this for long. Any help will be highly appreciated. Do let me know if you need more data from my end.
This feels like a reactivity error.
You are trying to onload loop over an array that has nothing in it. Its NULL.
What you want to do is wrap your for-loop in an if statement to make sure its only run when data is actually present:
<div class="card-place" v-if="tableCards">
        <card v-for="(card, index) in tableCards" :card="card"></card>
Or you can initialize your TableCards with something in it, but utilizing vueJs's reactivity engine would be preferable.
Once placeTableCards() is run, Vuejs should pick up on the data change, the if-statement will pass true, and your loop should execute.
                This doesn't help...Still throwing the same error :( ...I even tried updating every value via app.$set(app.tableCards, 0, card)....Even that doesn't help
– Dinesh Singh
                May 20, 2020 at 10:05
                run this function in a beforeCreate() function placeTableCards(cardsOnTable) {     app.tableCards = cardsOnTable } Also, you need a :key bind on your for-loop, add this to it :key="index"
– Sweet Chilly Philly
                May 21, 2020 at 1:22
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.