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>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>