Javascript InnerHTML 不适用于 Quasar/VueJS答案

【问题标题】：Javascript InnerHTML does not work with Quasar/VueJSJavascript InnerHTML 不适用于 Quasar/VueJS
【发布时间】：2020-02-03 08:31:24
【问题描述】：

基本上，我想根据下面的“counts”数组中的项目动态创建表。表的数量及其内容可以更改（为简单起见，从本示例中删除）。

这是我的 divContainer，这是将附加 innerHTML 的地方。

<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 部分不工作。没有错误，但也没有输出。可能 innerHTML 不支持 q-table（Quasar 或 VueJS 框架）

我还尝试在<script> 中插入 html 块，但它给了我一条错误消息：

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

帮忙，有人吗？

【问题讨论】：

不完全相关，但+= 不附加，这是一个作业。这只是var = var + add 的快捷方式。打开 DevTools 会告诉你为什么 <q-table 部分失败，当然应该有一条错误消息抱怨无限字符串文字。
还有，</script> 标签是否在函数体 }) 关闭之前关闭？
糟糕，复制粘贴是错误的……抱歉……现在更新了！

标签： javascript html vue.js quasar-framework

【解决方案1】：

一旦脚本被执行，生成的 HTML 似乎是正确的：

这可能是 vue.js 没有解析通过innerHTML 生成的代码的问题：我认为您应该通过v-for 生成它。

【讨论】：