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

CodePudding user response：

: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