Multiple buttons select from v-if-CodePudding

So, I have the following code

<div >
     <div v-for="kink in kinks.data" :key="kink.id">
           <button type="button" : > {{ kink.name }}</button>
     </div>
</div>

I also have a data point of kinks: []. What I need to be able to do is allow the user to click multiple buttons, and store the ID of each button into a new data point for storage. I also need the button they click (up to 10) to change from gray to red and vice versa.

I have never done this before so my head is swimming around on how to accomplish this. Any help would be grateful!

CodePudding user response：

If I understood you correctly try like following snippet:

new Vue({
  el: "#demo",
  data() {
    return {
      kinks: {data: [{id: 1, name: 'a'}, {id: 2, name: 'b'}, {id: 3, name: 'c'}, {id: 4, name: 'd'}, {id: 5, name: 'e'}]},
      selected: []
    }
  },
  methods: {
    setBtn(id) {
      if (this.selected.includes(id)) {
         this.selected.splice(this.selected.findIndex(i => i === id), 1)
      } else this.selected.push(id)
    },
    checkBtn(id) {
      return this.selected.includes(id)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y lMz2Mklv18 r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1 68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="demo">
<div >
  <div v-for="kink in kinks.data" :key="kink.id">
    <button type="button" @click="setBtn(kink.id)" : > {{ kink.name }}</button>
     </div>
</div>
</div>