Vue.js - charger un composant à partir d'un appel ajax

Question

J'essaie de rendre ou de charger des composants à partir de données api. Pour expliquer davantage, disons que j'ai un composant de test, que j'injecte directement dans mon composant parent, et qui fonctionne. Mais lorsque j'essaie d'enregistrer le tag du composant dans la base de données et de lancer un appel ajax, mon tag de composant s'affiche mais ne fonctionne pas ou plutôt ne se charge pas / ne se rend pas. Merci de m'aider.

Retour de mon 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
}

Mon composant parent :

<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

Vous ne pouvez spécifier que du HTML simple dans le champ v-html tag. Ainsi, l'ajout d'une balise de composant dans la chaîne transmise à v-html ne fonctionnera pas.

Si vous essayez simplement de spécifier le type de composant, vous pouvez utiliser une balise composant dynamique . Dans votre cas, cela pourrait ressembler à quelque chose comme ceci :

<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>