Vueの子コンポーネントは、私は2つのコンポーネント持っ

をレンダリングしない：Vueの子コンポーネントは、私は2つのコンポーネント持っ

Vue.component('page', { 
    props: ['pages'], 
    template: '<li>{{ pages.title }}</li>' 
}) 

Vue.component('block', { 
    props: ['blocks'], 
    template: '<div>{{ blocks.id }}</div>' 
})

「ページ」を親コンポーネント、および「ブロック」の子要素です。成分の

両方がアレイを通してループを含む：親「ページ」成分の外に置かれたとき、それはあるが

<page v-for="page in pages" v-bind:pages="page"> 
    <block v-for="block in blocks" v-bind:blocks="block"></block> 
</page>

「ブロック」成分は、全くレンダリングされません。私は何かが明らかに欠けているように感じますが、それは何ですか？

出典

2016-12-28 Mitchel Jager

ページコンポーネントのコンポーネントリストにブロックコンポーネントを含める必要があります。私はこれが動作していない怖いあなたがdocumentation

出典

2016-12-28 00:24:27 Nora

をチェックアウトすることができます

<page v-for="page in pages" v-bind:pages="page"></page>

：

var block = { props: ['blocks'], template: '<div>{{ blocks.id }}</div>' }); Vue.component('page', { data: function() { return { pages: [{title: 'Some title', blocks: [{id: 1, {id: 2}, {id: 3]}] } }, components: { block: block, }, props: ['pages'], template: '<li>{{ pages.title }}<block v-for="block in page.blocks" v-bind:blocks="block"></block></li>' });

その後のようなページコンポーネントを使用しています。「不明なカスタム要素：」が表示されています。私はまた、この解決策が間違っているように感じています。もし可能であれば、私は両方を別々のコンポーネントとして保ちたいと思います。 –

これらはまだ別々のコンポーネントですが、唯一の違いはブロックがローカルに登録されていることです。あなたがこれまで持っていたものを保つのであれば、ページとブロックのコンポーネントの使用方法を変更する必要があります。のタグは、テンプレート属性で定義したタグに置き換えられます。そのため、ブロックコンポーネントは表示されません。ページ内のブロックコンポーネントを使用するには、ページのテンプレートを変更する必要があります。 – Nora

このJSBinが見つかりました：https://jsbin.com/boluhe/3/edit?html,js,outputこれは私が望むことを、ループなしで行います。静的なコンポーネントでのみ可能ですか？ –

Vueの子コンポーネントは、私は2つのコンポーネント持っ

答えて

関連する問題