Why does v-for work only for a split second?

Viewed 70

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!

1 Answers
Related