vue.jsでリストを作成したい

Question

データの配列からリストを表示しようとしていますが、エラーが発生します：cannot read property 'name' of undefined。

HTML

<div id="list"> 
    <myitems v-for="item in list" v-bind:my="item"> 
</div> 

はJavaScript

var items = Vue.component('myitems', { 
    props: ['my'], 
    template: `<li>{{my.name}} {{my.age}}</li>` 
}); 

new items({ 
    data: { 
    list: [ 
     {name: 'myName', age: 25} 
    ] 
    } 
}).$mount("#list"); 

私はitem in listや小道具myと一致しないことができると思うが、私は何をすべきかがわからないんです。

Answer 1

私はこの問題があなたのhtmlにあると信じています。 <myitems>タグはv-forディレクティブのスコープ内にある必要があります。そのため、<myitems>タグで宣言しないでください。このような何かを試してみてください：

HTML

<div id="list" v-for="item in list" > 
    <myitems v-bind:my="item"></myitems> 
</div> 

Answer 2

さて、あなたのコードには多くの問題があります。 、

new Vue({ 
    data: { 
    list: [ 
     {name: 'myName', age: 25} 
    ] 
    } 
}).$mount("#list"); 

あなたのコンポーネントregistationは良いことのようにそれを保つ： -

まず最初に、root Vueのインスタンスを定義していない、このようにする必要があり

var items = Vue.component('myitems', { 
    props: ['my'], 
    template: `<li>{{my.name}} {{my.age}}</li>` 
}); 

そして、あなたがするのを忘れてテンプレートが返されるので、ulにコンポーネントをラップします。li

<div id="list"> 
    <ul> 
    <myitems v-for="item in list" v-bind:my="item"></myitems> 
    </ul> 
</div> 

実例：https://jsfiddle.net/am5Ldp9k/

Answer 3

コードにいくつかの問題があります。まず、登録するVueコンポーネントに変数を割り当てる必要はありません。あなたがVue.componentに登録した後、彼らは単にあなたに利用できるようになります：

Vue.component('myitems', { 
    props: ['my'], 
    template: '<li>{{my.name}} {{my.age}}</li>' 
}); 

第二に、あなたはルートコンポーネントを必要としています。あなたはルート要素として機能する要素のID /クラスに渡す必要があり

new Vue({ 
    el: '#list', 
    data: { 
    list: [{ name: 'myName', age: 25 }] 
    } 
}); 

、そしてあなたが子要素にまで渡したい任意のデータ：あなたはnew Vue()を呼び出すことによってこれを行うことができます。一度これを行うと、正常に動作するはずです。 https://jsfiddle.net/coligo/49gptnad/