Home > Mobile >  how to bind value of v-for to v-if
how to bind value of v-for to v-if

Time:11-02

I'm working with BootstrapVue. To my problem: I have a v-for in my template in which I have two buttons.

Looping over my v-for my v-if doesn't generate unique IDs and than after clicking one button each button will be triggerd (from Open me! to Close me! and other way around).

How can I manage to get each button only triggers itself and doesn't affect the other?

I think I have to use my n of my v-for but I acctually don't know how to bind this to a v-if..

Thanks in advance!

<template>
  <div>
    <div v-for="n in inputs" :key="n.id">
      <b-button v-if="hide" @click="open()">Open me!</b-button>
      <b-button v-if="!hide" @click="close()">Close me! </b-button>
    </div>

    <div>
      <b-button @click="addInput">Add Input</b-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id: null,
      inputs: [{
        id: 0
      }],
      hide: true,
    };
  },

  methods: {
    open() {
      this.hide = false
    },

    close() {
      this.hide = true
    },

    addInput() {
      this.inputs.push({
        id: this.id  = 1;
      })
    }
  }
};
</script>

CodePudding user response:

Everything seems to look fine. In order to handle each button triggers, you can maintain an object like so:

<script>
export default {
  data() {
    return {
      visibility: {
        0: false,
        1: false,
        2: false,
        ...upto n-1
      }
    };
  },

  methods: {
    open() {
      this.visibility[index] = false
    },

    close() {
      this.visibility[index] = true
    }
  }
};
</script>

and your template should be like

<template>
  <div>
    <div v-for="n in 10" :key="n">
      <b-button v-if="visibility[n]" @click="open(n)">Open me!</b-button>
      <b-button v-if="!visibility[n]" @click="close(n)">Close me! </b-button>
    </div>
  </div>
</template>

CodePudding user response:

If I get you right maybe to use index:

new Vue({
  el: '#demo',
  data() {
    return {
      hide: null,
    };
  },

  methods: {
    open(n) {
      this.hide = n
    },

    close() {
      this.hide = null
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<div id="demo">
  <div>
    <div v-for="n in 10" :key="n">
      <b-button v-if="!hide" @click="open(n)">Open me! {{n}}</b-button>
      <b-button v-if="hide === n" @click="close()">Close me! {{n}}</b-button>
    </div>
  </div>
</div>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response:

I would create an array of objects. Use a boolean as property to show or hide the clicked item.

var app = new Vue({
  el: '#app',
  data: {
    buttons: []
  },
  created () {
    this.createButtons()
    this.addPropertyToButtons()
  },
  methods: {
 
  createButtons() {
    // Let's just create buttons with an id
    for (var i = 0; i < 10; i  ) {
      this.buttons.push({id: i})
    }
  },
  
  addPropertyToButtons() {
   // This method add a new property to buttons AFTER its generated
   this.buttons.forEach(button => button.show = true)
  },
  
  toggleButton(button) {
   if (button.show) {
    button.show = false
  } else {
    button.show = true
  }
  // We are changing the object after it's been loaded, so we need to update ourselves
  app.$forceUpdate();
  }
  
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<template>
  <div>
    <div v-for="button in buttons" :key="button.id">
      <button v-if="button.show" @click="toggleButton(button)">Open me!</button>
      <button v-if="!button.show" @click="toggleButton(button)">Close me! </button>
    </div>
  </div>
</template>
</div>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

  • Related