how to bind value of v-for to v-if

user_16867612 0
Viewed 200

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 triggered (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 actually 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>
vuejs2 vue.js javascript
2 Answers

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

<script>
export default {
  data() {
    return {
      inputs: [{id: 0, visible: false}],
    };
  },

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

    close(index) {
      this.inputs[index].visible = true
    },
    addInput() {
      this.inputs.push({id: this.inputs.length, visible: false});
    }
  }
};
</script>

and your template should be like

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

Edit:

You don't need to insert an id every time you create a row, instead can use the key as id. Note that the inputs is an object and not array so that even if you want to delete a row, you can just pass the index and get it removed.

user_112811520

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>

user_95683580
Related