CODEWITHSUNDEEP
javascriptvue.js
kidz55
kidz55

Reputation: 315

Disable a button in a v-for loop using VueJS 2


I want to disable a button on click in a v-for loop in the following code : 

  <div class="row" style="border:solid 1px lightgrey;" v-for="element,counter in tableParent.etat_voies">
    <div class="col-md-3"  >
      <button  
      ref=buttonRef
      @click="forceState(element,counter-1,tableParent.type,tableParent.occ)" 
      style="background: white">
        FORCE
      </button>
   </div>
  </div>

I don't want to use Jquery
I could use a computed value to switch the disable property like this : 

:disable="someComputedValue"

The problem is that it disable all my buttons in the same time due to the v-for loop
I could also use the ref to get my button by ref using this.$refs.buttonRef but I don't know how to add properties dynamically.
If anybody could help me with that.

<template>
  <div class="col-md-6">
    <div class="panel panel-default">
      <div class="panel-heading">{{tableParent.type}} | {{tableParent.occ}}</div>
      <div class="panel-body">
        <div v-if="tableParent.type == 'MTF' ">
          <div class="row">
            <div class="col-md-4">Sortie</div>
            <div class="col-md-4">Mesure</div>
            <div class="col-md-4">Fréquence</div>
          </div>
          <div class="row" style="border:solid 1px lightgrey;" v-for="element1,counter in tableParent.mesure" >
            <div class="col-md-4" style="border-right:solid 1px lightgrey;">{{++counter}}</div>
            <div class="col-md-4" style="border-right:solid 1px lightgrey;">{{element1}}</div>
            <div class="col-md-4" >{{tableParent.frequence[--counter]}}</div>
          </div>
        </div>
        <div v-else>
          <div class="row">
            <div class="col-md-6">Sortie</div>
            <div class="col-md-6">Etat</div>
          </div>
          <div class="row" style="border:solid 1px lightgrey;" v-for="element,counter in tableParent.etat_voies">
            <div class="col-md-6" style="border-right:solid 1px lightgrey;">{{++counter}}</div>
            <div class="col-md-3"  v-if="element" style="background: green" ref=etat  >{{element}}</div>
            <div class="col-md-3" v-else style="background: red"  ref=etat  >{{element}}</div>

            <div class="col-md-3"  >
              <button  
              ref=button 
              @click="forceState(element,counter-1,tableParent.type,tableParent.occ)" 
              style="background: white">
                FORCE
              </button>
           </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>




<script>
  import axios from 'axios' 
  export default {
    name: 'BoardState',
    props : {
        tableParent : Object,
    },
    data () {
      return {
        counter: 0,

      }
    },
    methods : {
      forceState : function(element,counter,typeCarte,typeOcc) {
        let value
        if (element == 0){
          value = "1"
          this.$refs.etat[counter].textContent = value
          this.$refs.etat[counter].style = "background: yellow"
        } else {
          value = "0"
          this.$refs.etat[counter].textContent = value
          this.$refs.etat[counter].style = "background: yellow"
        }

        this.disableButton[counter] = true
        this.$refs.button[counter].
        axios.get('/cgi/etat_es/' + typeCarte + '/' + typeOcc + '/' + counter + '/' + value)
          .then((response) => {
          }).then((error) => {
        })

      }
    },
    mounted: function () {
    },
  }
</script>

Upvotes: 0

Views: 1122

Answers (1)

Kzy
Kzy

Reputation: 498

You might wanna add an object as referrence on what to button to disable.

Edit 1:

import axios from 'axios' 
  export default {
    name: 'BoardState',
    props : {
        tableParent : Object,
    },
    data () {
      return {
        counter: 0,
        disableButton: []

      }
    },
    methods : {
      forceState : function(element,counter,typeCarte,typeOcc) {
        let value
        if (element == 0){
          value = "1"
          this.$refs.etat[counter].textContent = value
          this.$refs.etat[counter].style = "background: yellow"
        } else {
          value = "0"
          this.$refs.etat[counter].textContent = value
          this.$refs.etat[counter].style = "background: yellow"
        }

        Vue.set(this.disableButton, counter, true);
        this.$refs.button[counter].
        axios.get('/cgi/etat_es/' + typeCarte + '/' + typeOcc + '/' + counter + '/' + value)
          .then((response) => {
          }).then((error) => {
        })

      }
    },
    mounted: function () {
    },
  }

And inside button element

<button  
      ref=buttonRef
      @click="forceState(element,counter-1,tableParent.type,tableParent.occ)"
      :disabled="disableButton[counter-1]"
      style="background: white">
        FORCE
</button>

Upvotes: 1

Related Questions