Используя Vue, как можно визуализировать другой HTML-код для макета из строки, возвращенной из API? - PullRequest
Новая
       8

Используя Vue, как можно визуализировать другой HTML-код для макета из строки, возвращенной из API?

0 голосов
/ 01 июня 2019

Цель: Создайте компонент макета, который принимает строку html, заменяет [PLACEHOLDERS] на соответствующий компонент и отображает структуру HTML с соответствующими компонентами.

Дано: Ниже первый сэмпл имеет [MAIN_NAV_DDM] и [SLIDER] вне child div, тогда как у второго сэмпла есть [SLIDER] и [SUB_NAV] внутри child div.

Пример 1 HTML-строки 

<div class="container-fluid">
  <div class="wrapper">
    <div class="wrapper--inner">
      <div class="flex-container--nav">[MAIN_NAV_DDM]</div>
      <div class="flex-container--slider">[SLIDER]</div>
      <div class="child">
        <div class="flex-container--main-content">[CONTENT]</div>
      </div>
    </div>
  </div>
</div>

Пример 2 HTML-строки 

<div class="container-fluid">
  <div class="wrapper">
    <div class="wrapper--inner">
      <div class="flex-container--nav">[MAIN_NAV]</div>
      <div class="child">
        <div class="flex-container--slider">[SLIDER]</div>
        <div class="flex-container--subnav">[SUB_NAV]</div>
      </div>
    </div>
    <div class="flex-container--main-content">[CONTENT]</div>
  </div>
</div>

Вопрос: Как можно использовать один компонент, который принимает либо образец 1, либо образец 2, возвращенный из API, и отображает соответствующий макет страницы?

Можно ли это сделать на стороне сервера?

Этот отдельный компонент также должен заменить [PLACEHOLDERS] соответствующими соответствующими компонентами. Например, [SLIDER] будет принимать и массив объектов, содержащих url (и другие параметры) для slider-component для использования при рендеринге карусели.

-

Что я пробовал: Глобальная регистрация компонентов

  1. Асинхронный компонент навигации (main.js)

Vue.component("async-slider", () => import("./components/SliderComp.vue"));

  1. Компонент генератора макетов с функцией рендеринга (main.js) 
Vue.component("layout-generator", {
  props: {
    code: String
  },
  render(h) {
    return h("div", [h(Vue.compile(this.code))]);
  }
});
  1. Использование компонента layout-generator с пропеллером для приема html из объекта данных (App.vue) 
<template>
  <div id="app">
    <layout-generator :code="html" />
  </div>
</template>
  1. Создан хук жизненного цикла, извлечь строку HTML из API и заполнить объект данных ответом (App.vue) 
export default {
  data() {
    return {
      html: "",
    };
  },
  methods: {
    getData() {
      let tempHtml = `Sample 1 HTML String Above`
      tempHtml = tempHtml.replace("[SLIDER]", "<async-slider />");
      this.html = tempHtml;
    }
  },
  created() {
    this.getData();
  }
};

Я на правильном пути, или это немного неопрятно? Чувствуется, что есть лучший способ сделать это, что я не смог понять.

И можно ли это сделать с помощью ядра dot net и рендеринга на стороне сервера Vue посредством вызовов API?

Это действительно желаемый результат. Пусть сервер извлекает строку html, заменяет заполнители компонентами, правильно отображает эти компоненты с помощью данных, передаваемых в них через реквизиты, и возвращает полную строку в браузер для визуализации.

Ура!

...