I've got a weird problem that's happening to me in Vue.js. I don't know if it's my fault or a bug.
When I use v-for with a comma before it (v-bind), it doesn't give me any errors but it doesn't display anything. When I don't use a comma, I get this error Elements in iteration expect to have 'v-bind:key' directives.
But if I add the comma back, it displays for a split second and then it gives me the aforementioned behavior.
Code in question:
<template>
<div class="outside--wrapper">
<form action="">
<p :v-for="element in words1">{{ element }}</p>
</form>
</div>
</template>
<script>
export default {
name: "Crossword",
data() {
return {
words1: {
1: ["S","i","l","a"],
2: ["S","i","l","a"],
3: ["S","i","l","a"],
4: ["S","i","l","a"],
},
}
},
}
</script>
Thanks in advance!
:v-for is equivalent to v-bind:v-for
the error says list iteration should has a key (v-bind:key or :key)
the correct code is
<p v-for="(elements, key) in words1" :key="key">{{ elements }}</p>
see https://v2.vuejs.org/v2/guide/list.html#v-for-with-an-Object