javascript - 使用 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="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>