Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

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.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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!

>Solution :

: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="(key, elements) in words1" :key="key">{{ elements }}</p>

see https://v2.vuejs.org/v2/guide/list.html#v-for-with-an-Object

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading