如何在使用 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()
  },

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事件時將choice.id推送到clicked數組：

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

Answer 2

最簡單的做法是在按下投票按鈕時設置一個變量，然后將其綁定到按鈕的“禁用”屬性：

v-bind:disabled="hasVoted"

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

Answer 4

我只是偶然發現了同樣的問題，我想我會分享我如何解決我的問題，這將再次包括創建另一個數組來記錄您在前面答案中提到的點擊，然后使用Array.prototype.some() 方法來確定哪個通過綁定 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>

我必須參考邁克爾對這個問題的回答，這是我找到解決方案的地方