[Vuejs]-How to fix "multiple root element" v-for error

2👍

Try also renaming variable from array to animalNames similar. And remove id from loop as there is not id element exist, instead you can use index

<template>
  <div>
   <div v-for="item,index in array" :key="index">
      {{item}}
   </div>
  </div>
</template>

1👍

You must have a root tag. Try wrapping your looped div in another div.

<template>
    <div>
      <div v-for="item in array" :key="item.id">
        {{item}}
      </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      array: ['Lion','Bear','Fish','Bird']
    }
  }
}
</script>

Leave a comment