[Vuejs]-Vue v-if dynamically pass value

by

3👍

You want to use an v-for loop to render the divs, and write the condition once:

Template:

  <template v-for="(value, index) in fetch">
    <div v-if="value > 0" >
      <p> DIV {{ index + 1 }} </p>
    </div>
  </template>

If you want to use part of the array, starting at X index and ending at X+Y index, use array.splice and iterate over the new array (starting and index 1 and getting the 3 following indexes):

let filteredFetch = fetch.splice(1, 4);

Template:

  <template v-for="(value, index) in filteredFetch">
    <div v-if="value > 0" >
      <p> DIV {{ index + 1 }} </p>
    </div>
  </template>

0👍

The decoupled way is to control the data – don’t mess with v-ifs in this case, use computed properties (or methods, if you need even more complex than that):

new Vue({
  el: "#app",
  data: {
    nextNumber: null,
    fetch: []
  },
  computed: {
    filteredFetch3() {
      // the v-if is solved here with a filter
      return this.fetch.filter(e => e > 3)
    },
    filteredFetch5() {
      // the v-if is solved here with a filter
      return this.fetch.filter(e => e > 5)
    }
    
  },
  methods: {
    pushNumber() {
      this.fetch.push(Number(this.nextNumber))
      this.nextNumber = null
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <label for="numberInput">
  Number input: <input id="numberInput" v-model="nextNumber" /><button @click="pushNumber">ADD NUMBER TO FETCH LIST</button>
</label>
  <hr /> FETCH (ALL THE FETCHED NUMBERS APPEAR HERE):
  <br /> {{ fetch }}
  <hr /> ONLY NUMBERS ABOVE 3 WILL APPEAR IN THIS LIST:
  <ul>
    <li v-for="(number, i) in filteredFetch3" :key="`${ number }-${i}`">
      {{ number }}
    </li>
  </ul>
  <hr /> ONLY NUMBERS ABOVE 5 WILL APPEAR IN THIS LIST:
  <ul>
    <li v-for="(number, j) in filteredFetch5" :key="`${ number }-${j}`">
      {{ number }}
    </li>
  </ul>
</div>

0👍

I don’t know it this is what you want achieve, but it’s what I understand, please check this code in jsfiddle and here how it looks:

 new Vue({
      el: "#app",
      mounted(){

      var totalBoxes = 10;

      for(let b=0; b < totalBoxes; b++){
        var replyDataObj1 = b;

              replyDataObj1={
                "route_id" : b
              }
       this.toListFetch= replyDataObj1; /** this will collect all the data from fetch as a list **/
       this.fetch.push(this.toListFetch);  /** list from toListFetch will be pushed to this.fetch **/
       }

      },

      data() {
         return {
           fetch:[],
           toListFetch: ''
         }
       },

       computed: {
         filteredBoxes() {
           // Computed property to return only fecth where route_id is greater than 0
           return this.fetch.filter(f => f["route_id"] > 0);
         }
       }
    })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
      <p>
      Filtered boxes
      </p>
      <div v-for="(f, indexFiltered) in filteredBoxes" :key="indexFiltered">
        DIV {{ f.route_id }}
      </div>
    </div>

A computed property is great to find or filter from items in your data properties

Leave a comment