javascript 如何在使用 vue.js 单击按钮后禁用按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50808465/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to disable a button after clicking a button using vue.js
提问by nk18
I am making a voting application. I want to disable the button once clicking the voting button. How to disable the button.
我正在申请投票。单击投票按钮后，我想禁用该按钮。如何禁用按钮。
template
模板
<v-btn
v-for="choice in data.choices"
@click="doVote(choice.id)"
color="success"
v-bind:key="choice.id">
votes: {{ choice.votes }}
</v-btn>
script
脚本
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()
},
回答by Psidom
v-btnhas a disabledpropertyyou can use; One way to do this could be create a clickedfield to record all buttons you've clicked and check whether a specific button is in the clicked array:
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>
In data, initialize clickedas an empty array:
在 中data，初始化clicked为一个空数组：
data () {
return {
vote: null,
questions: [],
clicked: []
}
}
Then in the doVotemethod, push the choice.idto clickedarray when the event is fired:
然后在doVote方法中，当事件被触发时推choice.id送到clicked数组：
doVote (vote) {
this.clicked.push(vote)
if (!vote) {
return
}
this.$request.questions.vote(vote).then(res => {
this.fetchData()
})
}
回答by Victor Behar
The simplest thing do is set a variable when the voting button is pressed and then bind it to the buttons 'disabled' property:
最简单的做法是在按下投票按钮时设置一个变量，然后将其绑定到按钮的“禁用”属性：
v-bind:disabled="hasVoted"
回答by Julian Paolo Dayag
You can add an another variable (in this case votes) which will record the votes and then you can use it to determine if the button should be disabled (see votes.indexOf(choice.id) !== -1).
您可以添加另一个变量（在本例中为votes），该变量将记录投票，然后您可以使用它来确定是否应禁用按钮（请参阅votes.indexOf(choice.id) !== -1）。
template:
模板：
<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>
script
脚本
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()
},
