Vue duplicate numbers in array breaks doom element

Question

Very weird situation, when I push any number which already exists in my array it duplicates and breaks my doom element. Array keeps normal, but doom displays something like this:

array:

my watcher :

  lastWins(){
      console.log(this.lastWins);
      this.lastWins.shift();
   }

Doom:

<ul class="gameHistoryList_rou">
        <li :style="{background: historyCheckColor(win)}" v-for="win of lastWins" :key="win">{{ win }}</li>
      </ul>

method to push(splice for watch):

this.lastWins.push(Math.round(Math.random() * 36));
this.lastWins = this.lastWins.splice(0);

Kris Dev · Accepted Answer · 2022-10-12 12:01:12Z

1

You need to set an unique key for each item.

Try this:

<ul class="gameHistoryList_rou">
    <li :style="{background: historyCheckColor(win)}" v-for="(win, index) of lastWins" :key="index">{{ win }}</li>
</ul>

edited Oct 12, 2022 at 12:01

answered Oct 12, 2022 at 12:00

Kris Dev

304 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue duplicate numbers in array breaks doom element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related