[Vuejs]-In Vue.js, how do I enable buttons in a v-for loop

by

0👍

I modifed your Page so that the :disabled simply checks if the current Input is different from the Value that was there before, but this solution does not change the original Dino value, if you want that then comment then I modify my solution further.

https://plnkr.co/edit/lyEXI8qgeLBykgIVlS29?p=preview

0👍

You could track the disabled state of all dinos in a new property:

data() {
  disabled: {
    Triceratops: true,
    Velociraptor: true,
    Tyrannosaurus: true,
  },
}

Then, bind the button’s disabled to that property:

<button :disabled="disabled[dino]">Press me</button>

In enableButton(dino), clear the disabled state of the given dino:

enableButton(dino) {
  this.disabled[dino] = false;
}

new Vue({
  el: '#app',
  data: () => ({
    dinos: [
      "Triceratops", "Velociraptor", "Tyrannosaurus"
    ],
    disabled: {
      Triceratops: true,
      Velociraptor: true,
      Tyrannosaurus: true,
    },
  }),
  methods: {
    enableButton(dino) {
      this.disabled[dino] = false;
    },
    onClick(dino) {
      alert(dino)
    }
  }
});
button:disabled {
  color: gray;
}
<script src="https://unpkg.com/vue@2.5.17"></script>

<div id="app">
  <template v-for="dino in dinos">
    <div>
      <input type="text" :value="dino" @input="enableButton(dino)">
      <button @click="onClick(dino)" :disabled="disabled[dino]">Press me</button>
    </div>
  </template>
</div>

Leave a comment