web-dev-qa-db-fra.com

Fonction de rendu Nuxt pour une chaîne HTML contenant des composants Vue

J'essaie de résoudre ce problème pour Nuxt

Codesandbox d'un WIP ne fonctionne pas: https://codesandbox.io/s/zw26v3940m

OK, j'ai donc WordPress en tant que CMS, et il génère un tas de HTML. Un exemple de HTML ressemble à ceci:

'<h2>A heading tag</h2>
<site-banner image="{}" id="123">Slot text here</site-banner>
<p>some text</p>'

Notez qu'il contient un composant Vue <site-banner> qui a quelques accessoires (le image prop est un objet JSON que j'ai laissé de côté). Ce composant est enregistré mondialement.

J'ai un composant que nous avons écrit, appelé <wp-content> qui fonctionne très bien dans Vue, mais ne fonctionne pas dans Nuxt. Notez les deux fonctions de rendu, l'une est pour Vue l'autre est pour Nuxt (évidemment c'est pour des exemples, je n'utiliserais pas les deux).

export default {
    props: {
        html: {
            type: String,
            default: ""
        }
    },
    render(h, context) {
        // Worked great in Vue
        return h({ template: this.html })
    }      
    render(createElement, context) {
        // Kind of works in Nuxt, but doesn't render Vue components at all
        return createElement("div", { domProps: { innerHTML: this.html } })
    } 
}

La dernière fonction de rendu fonctionne donc dans Nuxt, sauf qu'elle ne rendra pas réellement les composants Vue dans this.html, il les met simplement sur la page au format HTML.

Alors, comment dois-je faire cela dans Nuxt? Je veux prendre une chaîne HTML du serveur, la rendre sur la page et transformer tous les composants Vue enregistrés en véritables composants Vue Fondamentalement, une petite usine "VueifyThis (html)".

vue.jsdomrendernuxt.js
9
Drew Baker

J'ai apporté quelques modifications à votre code et à votre boîte. semble fonctionner maintenant https://codesandbox.io/s/q9wl8ry6q9

Les choses que j'ai changé qui n'ont pas fonctionné:

  1. le modèle ne peut avoir qu'un seul élément racine dans la version actuelle de Vue
  2. v-bind accepte uniquement les variables mais vous passez une chaîne.
0
AXE