使用VueJS 2在v-for循環中禁用按鈕

Question

我想在以下代碼中的v-for循環中禁用單擊按鈕：

  <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>

我不想使用Jquery
我可以使用計算值來像這樣切換disable屬性：

:disable="someComputedValue"

問題是由於v-for循環， 它同時禁用了我所有的按鈕
我也可以使用ref使用this。$ refs.buttonRef通過ref獲取按鈕，但是我不知道如何動態添加屬性。
如果有人可以幫助我。

<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>

Answer 1

您可能想添加一個對象作為要禁用的按鈕的參照。

編輯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 () {
    },
  }

和里面的按鈕元素

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