VueJS click on 1 button and disable the remaining buttons

Question

so i have 3 buttons in a v-for loop with a click method in it.

I want to click on a button and disable the others, but also be able to click the active button and enable the other.

Thanks :)

'data': []

<div v-for="(index, value, key) in data.data">
    <button @click="onClick(index)">
        <div>{{ index.id }}</div>
    </button>
</div>

onClick(index) {//}

please provide a code example of what you have so far

pretzelhammer
– pretzelhammer

2018-09-22 19:26:09 +00:00
Commented Sep 22, 2018 at 19:26 — pretzelhammer
– pretzelhammer, Commented Sep 22, 2018 at 19:26
@kfedorov91 done :)

Marcus Callory
– Marcus Callory

2018-09-22 19:36:23 +00:00
Commented Sep 22, 2018 at 19:36 — Marcus Callory
– Marcus Callory, Commented Sep 22, 2018 at 19:36

Bart · Accepted Answer · 2018-09-22 20:10:51Z

1

Something like this?

var app2 = new Vue({
  el: "#app",
  data: {
    buttons: [false, false, false]
  },
  methods: {
    onClick(index) {
      if (this.buttons.every(b => !b)) {
        this.buttons = this.buttons.map((b, i) => (i === index ? false : true));
      } else {
        this.buttons = this.buttons.map(b => false);
      }
    }
  }
});

https://codepen.io/bart0810/pen/zJXNXx

answered Sep 22, 2018 at 20:10

Bart

1213 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Marcus Callory Over a year ago

But the data loading is not like I want to.

Bart Over a year ago

What do you mean, data loading?

Marcus Callory Over a year ago

buttons: [false,false,false] ... I get my data in a json object where I loop through with the v-for. In my v-for I have multiple buttons, depending on how much objects they are. So I dont know how I can implement the buttons array in my code some how

Collectives™ on Stack Overflow

VueJS click on 1 button and disable the remaining buttons

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related