VueJS 在挂载后使用 v-for 或 else 方法答案

【问题标题】：VueJS use v-for after mounted or else methodVueJS 在挂载后使用 v-for 或 else 方法
【发布时间】：2022-06-22 21:05:38
【问题描述】：

我需要在挂载完成后获取数组，以便在 html 中创建部分的子项。喜欢 - 从 api 获取对象 -> 返回带有对象的数组 -> 创建子块。

mounted() {
apiLoop.then((result) => {
    let tracksArray = result.data
      for (let i = 0; i < tracksArray.length; i++) {
        let genSection = document.querySelector('.charts')
        genSection.appendTo(`<div class="container card chartsCard" data-musicid="${tracksArray[i].id}">)
      }
})}

但是如何使它正确呢？使用 v-for（但是如何将 trackArray 发送到 v-for？）或在 mount 中创建元素？

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

你必须像这个例子一样在数据中创建一个变量：

data() {
  return {
    items: [{ message: 'Foo' }, { message: 'Bar' }]
  }
}

<li v-for="(item, index) in items">
  {{ parentMessage }} - {{ index }} - {{ item.message }}
</li>

List Rendering

【讨论】：