Функция визуализации Nuxt для строки HTML, содержащей компоненты Vue - PullRequest
Новая
       19

Функция визуализации Nuxt для строки HTML, содержащей компоненты Vue

9 голосов
/ 07 мая 2019

Я пытаюсь решить эту проблему для Nuxt

Codesandbox WIP не работает: https://codesandbox.io/s/zw26v3940m

ОК, поэтому у меня WordPress какCMS, и он выводит кучу HTML.Пример HTML-кода выглядит следующим образом: 

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

Обратите внимание, что он содержит компонент Vue <site-banner>, на котором есть некоторые подпорки (пропелла image - это JSON-объект, который я оставил для краткости),Этот компонент зарегистрирован глобально.

У меня есть компонент, который мы написали, который называется <wp-content>, который прекрасно работает в Vue, но не работает в Nuxt.Обратите внимание на две функции рендеринга, одна для Vue, другая для Nuxt (очевидно, это для примера, я бы не использовал обе). 

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

Так что последняя функция рендеринга работает в Nuxt, кроме неефактически не отображает компоненты Vue в this.html, он просто помещает их на страницу в виде HTML.

Так как мне сделать это в Nuxt?Я хочу взять строку HTML с сервера, отобразить ее на странице и превратить любые зарегистрированные компоненты Vue в полноценные компоненты Vue.По сути, небольшая фабрика "VueifyThis (html)".

Ответы [ 4 ]

1 голос
/ 17 мая 2019

Это было то, что работало и было самым чистым, благодаря Джонасу Гальвезу из команды Nuxt через oTechie . 

export default {
  props: {
    html: {
      type: String,
      default: ""
    }
  },
  render(h) {
    return h({
      template: `<div>${this.html}</div>`
    });
  }
};

Тогда в вашем nuxt.config.js файле: 

    build: {
        extend(config, ctx) {
            // Include the compiler version of Vue so that wp-content works
            config.resolve.alias["vue$"] = "vue/dist/vue.esm.js"
        }
    }
1 голос
/ 15 мая 2019

Вот решение для CodeSandbox: https://codesandbox.io/s/wpcontent-j43sp

Главное состоит в том, чтобы обернуть динамический компонент в <div> (т. Е. HTML-тег) в шаблоне dynamicComponent(), так как он может иметь толькоодин корневой элемент, и, как это происходит из Wordpress, сама исходная строка может иметь любое количество элементов верхнего уровня.

И компонент WpContent пришлось импортировать.

0 голосов
/ 15 мая 2019

Я сделал некоторые изменения в ваших кодах и ящике.Кажется, работает сейчас https://codesandbox.io/s/q9wl8ry6q9

Вещи, которые я изменил, которые не работали:

  1. шаблон может иметь только один корневой элемент в текущей версии Vue
  2. v-bind принимает только переменные, но вы передаете строку.
0 голосов
/ 07 мая 2019

А если вы используете директиву v-html для рендеринга html?

как: 

<div v-html="html"></div>

Я думаю, что это сделает работу.

...