想使列表vue.js

我試圖顯示一個數組的列表，但我得到一個錯誤：cannot read property 'name' of undefined。想使列表vue.js

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但我不確定該怎麼做。

來源

2017-02-24 burning web fuel

我相信問題出在你的html中。 <myitems>標籤應位於v-for指令的範圍內，因此不應在<myitems>標籤上聲明。嘗試是這樣的：

HTML

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

來源

2017-02-24 13:59:08

很抱歉，我的意見是針對Daniel的回答 –

沒問題，請告訴我，如果您有任何問題 –

好了，有你的代碼中的許多問題。

第一件事情 - 還沒有定義根Vue的情況下，應該是這樣的：

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

你的組件registation是好的，保持這樣的：

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

你忘了由於模板返回li

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

自從模板返回後，將組件包裝到 ul中

工作示例：https://jsfiddle.net/am5Ldp9k/

來源

2017-02-24 14:07:16

謝謝我有一個問題。如果我想在一個頁面和不同的根目錄中使用多個Component，我該怎麼辦？該代碼也適用於多個組件使用。 –

@burningwebfuel抱歉，請您澄清一下您的問題嗎？ –

我的問題是丹尼爾的回答，我完全理解我的錯誤。自我解決愚蠢的問題。我誤解了我在一個頁面中只能使用一個「新Vue」。 –

在代碼中有幾個問題。首先，你不需要爲你註冊的Vue組件分配一個變量。你Vue.component註冊它們後他們會簡單地提供給你：

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

其次，你需要一個根組件。您可以通過調用new Vue()做到這一點：

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

你需要的元素ID /班通以服務爲根元素，並且要傳承給子元素的任何數據。一旦你這樣做，它應該正常工作。下面是一個工作示例的jsfiddle：https://jsfiddle.net/coligo/49gptnad/

來源

2017-02-24 14:15:57

想使列表vue.js

回答

相關問題