[Vuejs]-Using Vue v-for turns html code into a comment?

by

1👍

When you do:

<div id="game_board_block" v-for="num in 10">{{num}}</div>

You’re trying to loop & create multiple div elements with the same id. Since your Vue instance is linked to #game_board_block, there should only be one element with that id.

This is why this works:

<div id="game_board_block">
  <div v-for="num in 10">{{num}}</div>
</div>

Above, your Vue instance is able to mount on the div with id game_board_block.
Here’s the official documentation for more details: https://v2.vuejs.org/v2/guide/instance.html#Creating-a-Vue-Instance

👤nom_unique

0👍

you can’t do anything weird with vue root even though i haven’t tried it with vue3 root but i’m sure vue 2 requires a component to have only 1 node at root

👤Tachibana Shin

0👍

Let’s make some sense here.
The main problem is that your <div> is missing the :key prop.
A v-for should come with some unique key, so that Vue can differ between the rendered divs.
In Vue3 this problem doesn’t result in an error, but still it’s not recommended. So you should do the following:

<div
  id="game_board_block"
  v-for="listItem in list1"
  :key="listItem.somethingUnique
>
  {{ listItem.content }}
</div>

Assuming your list1 has something to support what I did here:

data: {
  n: 5,
  list1: [{
    somethingUnique: "index1",
    content: 5
  },
  {
    somethingUnique: "index2",
    content: 2
  },
  {
    somethingUnique: "index3",
    content: 0
  }]
}

Even though this should solve your problem, using the same id is an anti-pattern that you should avoid, as @Fred mentioned.

Making sure the ids stay unique is simple as well:

<div
  :id="`game_board_block-${listItem.somethingUnique}`"
  v-for="listItem in list1"
  :key="listItem.somethingUnique
>
  {{ listItem.content }}
</div>
👤Tzahi Leh

Leave a comment