如何在使用 vue.js 单击按钮后禁用按钮答案

【问题标题】：How to disable a button after clicking a button using vue.js如何在使用 vue.js 单击按钮后禁用按钮
【发布时间】：2018-06-12 02:30:26
【问题描述】：

我正在提交投票申请。单击投票按钮后，我想禁用该按钮。如何禁用按钮。

模板

  <v-btn
   v-for="choice in data.choices"
   @click="doVote(choice.id)"
   color="success"
   v-bind:key="choice.id">
   votes: {{ choice.votes }}
  </v-btn>

脚本

  data () {
    return {
      vote: null,
      questions: [],
    }
  },

  methods: {
    fetchData () {
      this.$request.questions.list().then(res => {
        this.questions = res.data.results
      })
    },

    // add votes
    doVote (vote) {
      if (!vote) {
        return
      }
      this.$request.questions.vote(vote).then(res => {
        this.fetchData()
      })
    },

  mounted () {
    this.fetchData()
  },

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案1】：

最简单的做法是在按下投票按钮时设置一个变量，然后将其绑定到按钮的“禁用”属性：

v-bind:disabled="hasVoted"

【讨论】：

【解决方案2】：

v-btn有一个disabled property可以使用；一种方法是创建一个clicked 字段来记录您单击的所有按钮并检查特定按钮是否在单击的数组中：

<v-btn
   :disabled="clicked.includes(choice.id)"
   v-for="choice in data.choices"
   @click="doVote(choice.id)"
   color="success"
   v-bind:key="choice.id">
   votes: {{ choice.votes }}
</v-btn>

在data中，将clicked初始化为一个空数组：

data () {
    return {
      vote: null,
      questions: [],
      clicked: []
    }
  }

然后在doVote方法中，在事件触发时将choice.id推送到clicked数组：

doVote (vote) {
  this.clicked.push(vote)
  if (!vote) {
    return
  }
  this.$request.questions.vote(vote).then(res => {
    this.fetchData()
  })
}

【讨论】：

我不认为这会起作用，它会禁用所有按钮，我想，正如我从他的代码中看到的那样，选项上有一个迭代器，我认为如果他添加状态会更好 isDisabled来自他的 API 的响应选择？
@TahaAzzabi 是的。你是对的。我完全错过了for 循环：-

【解决方案3】：

您可以添加另一个变量（在本例中为 votes），该变量将记录投票，然后您可以使用它来确定是否应禁用按钮（请参阅 votes.indexOf(choice.id) !== -1）。

模板：

  <v-btn
   :disabled="votes.indexOf(choice.id) !== -1"
   v-for="choice in data.choices"
   @click="doVote(choice.id)"
   color="success"
   v-bind:key="choice.id">
   votes: {{ choice.votes }}
  </v-btn>

脚本

  data () {
    return {
      votes: [],
      vote: null,
      questions: [],
    }
  },

  methods: {
    fetchData () {
      this.$request.questions.list().then(res => {
        this.questions = res.data.results
      })
    },

    // add votes
    doVote (vote) {
      if (!vote) {
        return
      }
      this.$request.questions.vote(vote).then(res => {
        this.fetchData()
        this.votes.push(vote);
      })
    },

  mounted () {
    this.fetchData()
  },

【讨论】：

【解决方案4】：

我刚刚偶然发现了同样的问题，我想我会分享我如何解决我的问题，这将再次包括创建另一个数组来记录您在前面的答案中提到的点击，然后使用 Array.prototype.some() method 来确定要使用哪些按钮通过绑定你的 v-btn 组件的 disabled 属性来禁用，如下所示：

<template>
  <v-btn
   :disabled="votes.some(vote => vote.id === choice.id)"
   v-for="choice in data.choices"
   @click="doVote(choice.id)"
   color="success"
   v-bind:key="choice.id">
   votes: {{ choice.votes }}
  </v-btn>
</template>

我必须在 SO question 上参考 Michael 的回答，这是我找到解决方案的地方

【讨论】：