在 VueJS 上下文中循环时创建了不必要的 div 标签

大佬教程收集整理的这篇文章主要介绍了在 VueJS 上下文中循环时创建了不必要的 div 标签，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决在 VueJS 上下文中循环时创建了不必要的 div 标签？

我正在尝试显示来自 API 的数据中的卡片。我可以根据我使用的条件显示卡片，但会创建额外的 div，这实际上是在创建空间。

这是我的回答：

    [
        ...

      {
        "ID": 6,"name": "Highway","price": "High","min": "785","max": "1856","tag": null,"active": true
      },{
        "ID": 8,"name": "Lowway","price": "low","min": null,"max": 0,"active": false
      } 

      ...

    ]

代码如下：

<template>
  <div ID="bot-Trading-app">
    <div class="vx-row">
    <div class="vx-col w-full md:w-1/2 mb-base" v-for="item in items" v-bind:key="item.ID">
      <div v-if="item.active === true">
          <vx-card>
            A short story is a pIEce of prose fiction that typically can be read in one sitTing and focuses on a self-contained incIDent or serIEs of linked incIDents,with thE intent of evoking a single effect or mood. The short story is one of the oldest types of literature and has existed in the form of legends,myThic tales,folk tales,fairy tales,fables and anecdotes in varIoUs ancIEnt communitIEs across the world. The modern short story developed in the early 19th century.
          </vx-card>
        </div>
      </div>
    </div>
  </div>
</template>

...Script...

 created () {

    this.$http.get('/items')
      .then((responsE) => { this.items = response.data })
      .catch((error) => { console.log(error) })
 },

这是我得到的输出：

正如您所看到的，图像额外的 div 被创建并创建了一个空间，我检查了 devtools 然后将其删除，然后页面看起来一切正常。现在，我不知道如何摆脱这个不必要的 div。

请帮帮我，我只想为那些活跃的卡片显示真正的卡片。

解决方法

created () {

   this.$http.get('/items')
      .then((responsE) => { this.items = response.data.filter(item => item.activE) })
      .catch((error) => { console.log(error) })
},

computed: {
    activeItems () {
        return this.items.filter(item => item.activE)
    }
}

大佬总结

以上是大佬教程为你收集整理的在 VueJS 上下文中循环时创建了不必要的 div 标签全部内容，希望文章能够帮你解决在 VueJS 上下文中循环时创建了不必要的 div 标签所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。