Vue.js - ajax呼び出しからコンポーネントをロードする

Question

私は、APIデータからコンポーネントをレンダリングまたはロードしようとしています。もっと説明するために、テストコンポーネントを親コンポーネントに直接注入するとしましょう。しかし、コンポーネントタグをデータベースに保存してajax呼び出しを実行しようとすると、コンポーネントタグが表示されますが、動作しないか、ロード/レンダリングされません。助けてください。私のAPIから

戻る：

{ 
    "_id": "59411b05015ec22b5bcf814b", 
    "createdAt": "2017-06-14T11:16:21.662Z", 
    "updatedAt": "2017-06-14T12:41:28.069Z", 
    "name": "Home", 
    "content": "<test-comp></test-comp>", 
    "slug": "/", 
    "navName": "Home", 
    "__v": 0, 
    "landing": true, 
    "published": false 
} 

私の親コンポーネント：

<template> 
    <div> 
    <test-comp></test-comp> // This works 
    <div v-html="page.content"></div> // But this doesn't :(
    </div> 
</template> 

<script> 
    import { Api as defApi } from 'shared'; 
    import test from './testComp'; 

    export default { 
    data:() => ({ 
     page: {} 
    }), 
    created() { 
     defApi.get('api/pages/landing') 
     .then((res) => { 
     this.page = res.data.body; 
     }); 
    }, 
    components: { 
     testComp: test 
    } 
    }; 
</script> 

Answer 1

あなただけv-htmlタグでプレーンなHTMLを指定することができます。したがって、v-htmlに渡された文字列内にコンポーネントタグを追加することはできません。

単にコンポーネントタイプを指定しようとしている場合は、dynamic componentを使用できます。あなたの場合は、次のようになります。

​​