Возврат Vue Component в пользовательской функции рендеринга для содержательной встроенной записи - PullRequest
Новая
       35

Возврат Vue Component в пользовательской функции рендеринга для содержательной встроенной записи

0 голосов
/ 02 июля 2019

Я играю с Содержательно !и у меня возникли проблемы с полем содержимого Rich Text.

Я использую '@ contentful / rich-text-types' и @ contentful / rich-text-html-renderer модулей для настройки способа визуализации этого блока и отображения некоторых ресурсов и ссылок, связанных в Rich Text Content.

После вызова getEntries в функции nuxt asyncData у меня есть данные описания доступно на моей странице компонента.Я использую функцию documentToHtmlString с опциями.

Все работает нормально, но я бы хотел использовать компонент, который я уже написал (Post.vue), вместо того, чтобы возвращать шаблон в шаблонных строках ES6.

Я знаю, что это возможно, но я совсем новичок в мире JS.

Я пытался потребовать компоненты / post / Post.vue, но я не знаюне знаю, как его использовать. 

import { BLOCKS } from '@contentful/rich-text-types';
import { documentToHtmlString } from "@contentful/rich-text-html-renderer"

Шаблон компонента Vue, в котором отображается поле расширенного текста 

  <section class="container">
    <div class="columns">
      <div class="column">
       <div v-html="formatContent(description)" /> 
      </div>
    </div>
  </section>

Я просто вызываю метод formatContent для вызова documentToHtmlString следующим образом (это работает): 

  methods: {
    formatContent(content) {
      return documentToHtmlString(content, options)
    }
  }

И настройте documentToHtmlString с параметрами, описанными в документе: 

  const embeddedEntryRender = (node) => {
    const { data: { target: entry} } = node

    const fields = entry.fields
    const sys = entry.sys
    // LOOK HERE
    // const postComponent = require('~/components/post/Post')

    return `
      <div class="column is-4">
        <div class="card">

          <div class="card-content">
            <div class="media">
              <div class="media-content">
                <h3 class="title is-4">${fields.title}</h3>
                <div class="subtitle is-6">${fields.description}</div>
              </div>
            </div>

            <div class="content">
            </div>

          </div>
        </div>
      </div> `
  }

  const options = {
    renderNode: {
      [BLOCKS.EMBEDDED_ENTRY]: (node) => embeddedEntryRender(node),
      // [BLOCKS.EMBEDDED_ASSET]: (node) => `<custom-component>${customComponentRenderer(node)}</custom-component>`
    }
  }

Не обнаружено ошибок

-

Большое спасибо

...