Как показать html в vue / ionic4

Question

Я пробую новую Ionic_beta с Vue.
В компоненте у меня есть шаблон, показывающий некоторые HTML.
Если я поместил <div>, содержащий html, в директиву <ion-content>, html не будет показан. Если я пропущу <ion-content>, HTML будет показан, но теперь панель с HTML не будет прокручиваться.

html Показать, без прокрутки .....

<template>
  <div>
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Over TRINL</ion-title>
            </ion-toolbar>
        </ion-header>
        <div class="padding">
          <div v-html="legacySystemHTML"></div>
        </div>
    </div>
</template>

HTML НЕ отображается

<template>
  <div>
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Over TRINL</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <div class="padding">
              <div v-html="legacySystemHTML"></div>
            </div>
        </ion-content>
    </div>
</template>

Answer 1

Если <ion-header> и <ion-content> не являются прямыми потомками <ion-app> (например, для соответствия требованию компонента Vue иметь только 1 корневой элемент), вы должны заключить их в элемент с class="ion-page", поэтому в вашемcase:

<template>
  <div class="ion-page"> <!-- apply the "ion-page" class -->
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Over TRINL</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <div class="padding">
        <div v-html="legacySystemHTML"></div>
      </div>
    </ion-content>
  </div>
</template>

См. также: Ионное содержание не будет отображаться при использовании ионного ядра 4

Пример: https://plnkr.co/edit/ylz2jxIFjgUym98gyKeR?p=preview (без Vue)