[Vue] powielanie elementów

Question

Witam,

 

Mam problem z powtarzaniem elementów w Vue. Próbuje wykonać ten przykład:

https://012.vuejs.org/guide/list.html

Po załadowaniu apki w konsoli pokazuje się "Element #example-1 cannot be found"

<template>
<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>
</template>

<script>
import Vue from 'vue';

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

export default {
  name: 'tasksList',
  props: {
    msg: String
  }
}
</script>

 

Answer 1

Każdy element powielany musi mieć unikalny klucz. To jest najprawdopodobniej powód błędu. Klucz możesz ustalić na item.message. Czyli :key="item.message"