Javascript InnerHTML 不适用于 Quasar/VueJS

Question

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

这是我的 div容器，这是将附加 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>

有人帮忙吗？

Answer 1

执行脚本后，生成的 HTML 似乎是正确的：

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

Javascript InnerHTML 不适用于 Quasar/VueJS

Javascript InnerHTML does not work with Quasar/VueJS

html

javascript

vue.js

quasar-framework