Vue.js - Ajax 호출에서 컴포넌트를 로드합니다.

Vue.js - Ajax 호출에서 컴포넌트를 로드합니다.

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>

지정할 수 있는 것은 플레인 HTML 뿐입니다.v-html태그. 따라서 전달된 문자열 내에 컴포넌트 태그를 추가합니다.v-html작동하지 않습니다.

단순히 구성 요소 유형을 지정하려는 경우 동적 구성 요소를 사용할 수 있습니다.이 경우 다음과 같이 표시됩니다.

<template>
  <div>
    <component :is="dynamicComponent"></component>
  </div>
</template>

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

  export default {
    data: () => ({
      dynamicComponent: null,
    }),
    created() {
      defApi.get('api/pages/landing')
      .then((res) => {
        this.dynamicComponent = res.data.componentType; // e.g. "testComp"
      });
    },
    components: {
      testComp: test
    }
  };
</script>

언급URL : https://stackoverflow.com/questions/44546333/vue-js-load-component-from-ajax-call