I'm facing a strange issue while working with Vue.js. I'm not sure if the problem lies with my code or if it's a bug in the framework.
Here's the scenario: When I use v-for with a comma before it (v-bind), there are no errors but nothing is displayed on the screen. However, when I remove the comma, I encounter an error stating
Elements in iteration expect to have 'v-bind:key' directivesInterestingly, when I add the comma back in, the content displays for a brief moment before reverting to the previously mentioned behavior.
Below is the snippet of code causing the issue:
<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>
Your assistance is greatly appreciated!