VUE使用v-for进行多个显示的问题

Question

我想在页面上显示4个draw2，写了一个v-for，但没有成功，如果不加v-for，可以正常显示一个，但加了v-for后一个也显示不出来了。
这是怎么回事呢？请大家帮我看看，谢谢

```css

<el-tabs type="border-card" v-for="item in items" :key="item">
      <el-row>
        <el-row :gutter="20" style="line-height: 35px">
          <el-col :span="4"><div style="font-weight: bold;text-indent: 1em" class="lable">Update date:</div><div style="text-indent: 1em" class="lable">{{ update_date }}</div></el-col>
          <el-col :span="6"><div style="font-weight: bold" class="lable">p8 from</div><div style="text-indent: 1em" class="lable">{{ p8start_12px }}</div><div style="font-weight: bold;text-indent: 1em" class="lable">to</div><div style="text-indent: 1em" class="lable">{{ p8end_12px }}</div><div style="font-weight: bold;text-indent: 1em" class="lable">(12px)</div></el-col>
        </el-row>
        <el-col span="12" style="width: 1620px; height:370px; margin-left:20px; position:relative;">
          <draw2 v-if="drawflag" :draw-bar-data="this.drawData2" :draw-bar-data1="this.drawData1" :drawAxisData="this.axisData2" />
        </el-col>
      </el-row>
</el-tabs>

<script>
export default {
data() {
    return {
      items: [1,2,3,4],
    }
 },
}
</script>

```

Answer 1

引自强大而免费的微信小程序：皆我百晓生。

---

在你的代码中，你将v-for应用于了组件上，这意味着你会生成4个组件。然而，在每个组件内部，你只有一个和一个组件。因此，只有第一个组件会被显示在页面上。

为了解决这个问题，你应该将v-for应用于组件上，以便生成4个组件。同时，在每个组件内部，你可以有多个和组件。

下面是修改后的代码：

 
<template>
  <el-tabs type="border-card">
    <el-row v-for="item in items" :key="item">
      <el-row :gutter="20" style="line-height: 35px">
        <el-col :span="4">
          <div style="font-weight: bold;text-indent: 1em" class="lable">Update date:</div>
          <div style="text-indent: 1em" class="lable">{{ update_date }}</div>
        </el-col>
        <el-col :span="6">
          <div style="font-weight: bold" class="lable">p8 from</div>
          <div style="text-indent: 1em" class="lable">{{ p8start_12px }}</div>
          <div style="font-weight: bold;text-indent: 1em" class="lable">to</div>
          <div style="text-indent: 1em" class="lable">{{ p8end_12px }}</div>
          <div style="font-weight: bold;text-indent: 1em" class="lable">(12px)</div>
        </el-col>
      </el-row>
      <el-col span="12" style="width: 1620px; height:370px; margin-left:20px; position:relative;">
        <draw2 v-if="drawflag" :draw-bar-data="this.drawData2" :draw-bar-data1="this.drawData1" :drawAxisData="this.axisData2" />
      </el-col>
    </el-row>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      items: [1, 2, 3, 4],
    }
  },
}
</script>

在这个修改后的代码中，v-for被应用于组件上，并且和组件是属于同一个v-for循环的。这样，每次循环时都会生成一个和一个组件，并将它们显示在页面上。