2016-08-15 13 views
2

私のVue-Instanceからオブジェクトのリストをレンダリングしようとしています。各オブジェクトはコンポーネントを使用する必要があるので、コンポーネントをv-for-loopに配置します。しかし、私が得るのは、正しい値ではなくlist.titlelist.textです。VueJS - v-forの内部のコンポーネント

v-for-loopsでコンポーネントを使用する特別な方法はありますか?

私はこれを見つけましたが、それを使用する方法や正しい方法がわからない場合はthread in the Vue-Forumです。

アプリケーション:

<div id="app"> 
    <div v-for="list in lists"> 
     <listcard title="list.title" text="list.text"></listcard> 
    </div> 
</div> 

テンプレート:

<template id="listcard-template"> 
    <div class="card"> 
     <h2>{{ title }}</h2> 
     <p>{{ text }}</p> 
    </div> 
</template> 

マイコンポーネント:

Vue.component('listcard', { 
    template: '#listcard-template', 
    props: ['title', 'text'] 
}) 

ヴュー・インスタンス:

new Vue({ 
    el: "#app", 
    data: { 
     lists: [ 
      {title: "title1", text: "text1"}, 
      {title: "title2", text: "text2"}, 
      ... 
     ] 
    } 
}) 

ありがとう!

答えて

8

あなたは、パラメータの前に:を使用して動的小道具のように渡す必要があります。

ドキュメントから
<listcard :title=list.title :text=list.text></listcard> 

初心者が使用して番号を伝承しようとされていることを確認する傾向がよくある間違いリテラル構文:

<!-- this passes down a plain string "1" --> 
<comp some-prop="1"></comp> 

しかし、これはリテラル小道具なので、その値は実際の数値ではなくプレーンストリング "1"として渡されます。

<!-- this passes down an actual number --> 
<comp :some-prop="1"></comp> 

https://vuejs.org/guide/components.html#Literal-vs-Dynamic

:私たちは実際のJavaScript番号を伝承したい場合は、私たちは、その値がJavaScriptの式として評価させるために、動的な構文を使用する必要があります
関連する問題