Javascript Внутренний HTML не работает с Quasar / VueJS - PullRequest
Новая
       5

Javascript Внутренний HTML не работает с Quasar / VueJS

1 голос
/ 03 февраля 2020

По сути, я хочу создавать таблицы динамически на основе элементов в массиве 'count' ниже. Количество таблиц может меняться, равно как и их содержимое (для простоты удалено из этого примера).

Вот мой divContainer, здесь будет добавлен внутренний HTML. 

<div id="divContainer" style="padding: 3%;">
</div>

И мой JS: 

<script>
const columns = [
  { name: 'desc', align: 'left', label: 'data', field: 'desc' },
  { name: 'tag', align: 'center', label: 'name', field: 'name' },
  { name: 'length', align: 'center', label: 'len', field: 'length' },
  { name: 'value', align: 'left', label: 'val', field: 'value' }
]

var counts = ['5', '6', '7', '8']

var container = document.getElementById('divContainer')
counts.forEach(function (count) {
   container.innerHTML += '<div id="panel-' + count + '" class="text-h4 q-mb-md">' + count
   container.innerHTML += ' \
     <q-table \
       :columns="columns" \
       :rows-per-page-options="['100']" \
       row-key="name" \
       dense \
       separator=horizontal \
     > \
       <template v-slot:body="props"> \
       </template> \
     </q-table> \
    '
     container.innerHTML += '</div>'
   })
</script>

Однако, похоже, это не работает. Первый div работает нормально (выводит содержимое массива), но часть q-table не работает. Нет ошибок, но нет и вывода. Возможно, внутренний HTML не поддерживает q-таблицу (Quasar или VueJS framework)

Я также пытался вставить чанк html в <script>, но выдает сообщение об ошибке: 

<script id="table" type="text/javascript">
  <q-table
    :columns="columns"
    :rows-per-page-options="['100']"
    row-key="name"
    dense
    separator=horizontal
  >
    <template v-slot:body="props">
    </template>
  </q-table>
</script>

Помогите, кто-нибудь?

1 Ответ

0 голосов
/ 03 февраля 2020

Как только скрипт выполнен, сгенерированный HTML кажется правильным: generated html got from browser developer tools

Вероятно, дело в vue. js, не разбирающем код генерируется с помощью innerHTML: я думаю, вы должны сгенерировать его с помощью v-for.

...