CODEWITHSUNDEEP
htmlvue.js
app_er
app_er

Reputation: 87

Unnecessary div tag created while looping in the context of VueJS

I am trying to display cards from the data coming from the API. And i am able to display cards for the condition that i have used, but extra div is created which is actually creating space.

Here is my response:

    [
        ...

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

      ...

    ]

Here is the code:

<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) })
 },

Here is the output that i am getting:

enter image description here

As you can see the image extra div is created and it creates a space, i checked in the devtools and then removed that, then the page looks all fine. Now, i don't know how to get rid of this unnecessary div.

Please do help me, i want to display cards only for those which are active true.

Upvotes: 0

Views: 105

Answers (1)

Lead Developer
Lead Developer

Reputation: 1169

You can filtering out before rendering it.

Method 1

Save the items which has active=true value.

created () {

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

Method 2

You can use the power of Computed Properties in Vue.

Make one computed property called activeItems and render it.

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

Upvotes: 1

Related Questions