Vue 3 - Cannot read index v-for index argument

Question

I am trying to access the v-for index argument, but it throws an error saying it is not defined. What is wrong with this? Is the table tag maybe the problem?

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">
<tbody>
  <tr v-for="(item, idx) in message">
    <div v-if="idx <= 3">  
      {{ idx }}
    </div>
  </tr>
</tbody>
</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref(['a', 'b', 'c', 'd', 'e', 'f'])
      return {
        message
      }
    }
  }).mount('#app')
</script>

I even removed v-if but still doesn't work.

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">
<tbody>
  <tr v-for="(item, idx) in message">
    {{ idx }}
  </tr>
</tbody>
</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref(['a','b','c','d','e','f'])
      return {
        message
      }
    }
  }).mount('#app')
</script>

It works fine with this code. I stopped using table tag for div tag.

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">
  <div v-for="(item, idx) in message">
      {{idx}}
  </div>
</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref(['a','b','c','d','e','f'])
      return {
        message
      }
    }
  }).mount('#app')
</script>

Answer 1

When you create a table you must use the correct elements.

• You can't use <tbody> by itself.

• You're missing <table></table>.

• The content of <tr> must be <td> or <th>

It's not required but if desired you can put a <div> inside of <td>:

<div id="app">
  <table>
    <tbody>
      <tr v-for="(item, idx) in message">
        <td>
          <div v-if="idx <= 3">  
            {{idx}}
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>