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来获取我的按钮，使用这个。$ refs.buttonRef 但我不知道如何动态添加属性。
如果有人可以帮助我。

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

使用VueJS 2禁用v-for循环中的按钮

1 个答案: