Vue.js：複数のコンポーネントタイプを含むこのリストにデータが表示されないのはなぜですか？

私は1つの親の中でレンダリングされる複数のコンポーネントタイプを持つことができるようになっています。答えを探すのは簡単なことではありません。Vue.js：複数のコンポーネントタイプを含むこのリストにデータが表示されないのはなぜですか？

私はそれを区別するためにテンプレートに何かを追加することでコンポーネントを区別していることは知っていますが、以下に示すようにデータを渡すと何も得られません。

編集：これらのコンポーネントをHTMLでレンダリングする必要はありません。この機能を使用するには、JS経由で渡す必要があります。

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
</head> 
<body> 
<div id="app"> 
    <component v-for="widget in widgets" :is="widget.type"></component> 
</div> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script> 
<script> 
    Vue.config.debug = true 

    Vue.component('component-a', { 
     template: '<p>{{foo}}</p>', 
     props: ['foo',] 
    }); 

    Vue.component('component-b', { 
     template: '<p>{{bar}}</p>', 
     props: ['bar',] 
    }); 

    new Vue({ 
     el: "#app", 
     data: { 
      widgets: [ 
       { 
        type: "component-a", 
        foo: 'Hello' 
       }, 
       { 
        type: "component-b", 
        bar: "World", 
       }, 
      ] 
     } 
    }); 
</script> 

</body> 
</html>

出典

2017-01-31 James N

問題は、あなたがしているように、コンポーネントが空の文字列でレンダリングされfooとbar要素あなたの例では

<!doctype html> 
<html> 
<head> 
    <title></title> 
</head> 
<body> 
<div id="app"> 
    <component v-for="widget in widgets" :is="widget.type" :foo="widget.foo" :bar="widget.bar"></component> 
</div> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script> 
<script> 
    Vue.config.debug = true 

    Vue.component('component-a', { 
     template: '<p>{{foo}}</p>', 
     props: ['foo',] 
    }); 

    Vue.component('component-b', { 
     template: '<p>{{bar}}</p>', 
     props: ['bar',] 
    }); 

    new Vue({ 
     el: "#app", 
     data: { 
      widgets: [ 
       { 
        type: "component-a", 
        foo: 'Hello' 
       }, 
       { 
        type: "component-b", 
        bar: "World", 
       }, 
      ] 
     } 
    }); 
</script> 

</body> 
</html>

jsFiddle

のための任意の小道具を渡していないということですあなたが渡そうとしている値は見えません。互換性のあるコンポーネントを使用する場合は、共通の値インタフェースを使用するのが最善の方法です。線に沿って何か：

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
</head> 
<body> 
<div id="app"> 
    <component v-for="widget in widgets" :is="widget.type" :value="widget.value"></component> 
</div> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script> 
<script> 
    Vue.config.debug = true 

    Vue.component('component-a', { 
     template: '<p>{{value.foo}}</p>', 
     props: ['value',] 
    }); 

    Vue.component('component-b', { 
     template: '<p>{{value.bar}}</p>', 
     props: ['value',] 
    }); 

    new Vue({ 
     el: "#app", 
     data: { 
      widgets: [ 
       { 
        type: "component-a", 
        value: { 
         foo: 'Hello' 
        } 
       }, 
       { 
        type: "component-b", 
        value: { 
         bar: "World", 
        } 
       }, 
      ] 
     } 
    }); 
</script> 

</body> 
</html>

コンポーネントのみ必要な成分に単一の値オブジェクトを渡すように構成要素がそのオブジェクトから一意の値を引きます。

出典

2017-01-31 21:21:38

ああ、本当にありがとう、ありがとう！ –

@JamesN問題ありません。私はあなたのプロジェクトを助け、幸運を祈りました。 –

Vue.js：複数のコンポーネントタイプを含むこのリストにデータが表示されないのはなぜですか？

答えて

関連する問題