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

Question

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

模板

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

原文由 nk18 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

v-btn 有一个 disabled 您可以使用的属性；一种方法是创建一个 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()
  })
}

原文由 Psidom 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

 v-bind:disabled="hasVoted"

原文由 Victor Behar 发布，翻译遵循 CC BY-SA 4.0 许可协议