javascript - vue :pelaporan ralat kunci

Question

<template>
    <p id="app">
        <router-view></router-view>
        <template v-for="(item, index) in items" :key="item.id">
            <p>{{ item.name }}</p>
        </template>
    </p>
</template>

<script>
export default {
    name: 'app',
    data () {
        return {
            items: [
                {
                    id: 0,
                    name: 'lisi'
                }
            ]
        }
    },
    created () {
    
    
    },
    methods: {

    },
    mounted () {
        
    }
}








</script>

Ia sangat mudah tetapi ia masih melaporkan ralat saya juga mabuk.

Tiada masalah walaupun anda membuat demo kecil sendiri. tidak tahu kenapa.

By the way, apa kegunaan :key? Saya baru sahaja menggunakannya. Terangkan secara terperinci.

Answer 1

Masalah diselesaikan: : Kunci mesti diletakkan pada elemen html sebenar, bukan pada <template></template>

Kod diubah suai kepada:
Nota: Teg <router-view></router-view>

<p id="app">
   <!-- <router-view></router-view>-->
    <template v-for="(item, index) in items">
      <p :key="item.id">
        <p>{{ item.name }}</p>
      </p>
    </template>
  </p>

Kod di atas boleh dihuraikan ke dalam kod berikut:

<template v-for="(item,index) in items" >
     <p v-bind:key="item.id">
        <p>{{ item.name }}</p>
      </p>
</template>

Kod di atas:key=>mengikat atribut

: Bersamaan dengan v-bind, mempunyai tiga kegunaan

1. Apabila mengikat atribut kelas atau gaya, sokong jenis nilai lain, seperti tatasusunan atau objek

2. Apabila mengikat prop, prop mesti diisytiharkan dalam komponen anak. Anda boleh menggunakan pengubah suai untuk menentukan jenis pengikatan yang berbeza

   3 Apabila tiada parameter, anda boleh mengikat objek yang mengandungi pasangan nilai kunci.
   

Pautan rujukan

v-bind vue.js

: Penggunaan kunci

Answer 2

Adalah disyorkan untuk membaca lebih lanjut mengenai dokumen rasmi vue yang kecil dan cantik semuanya ada dalam dokumen rasmi.

• vue bermula dari sini Pengenalan - Vue.js

• api lihat di sini Vue api

• vue instance Markdown editor - Vue.js

Sebenarnya, pautan di atas tersedia dalam dokumen rasmi vue, dan ia saling berkait
Baca lagi, berlatih lagi, ringkaskan lagi, bagaimana anda tidak faham!