Javascript 如何在使用vue.js单击按钮后禁用按钮
我正在申请投票。单击投票按钮后,我想禁用该按钮。如何禁用按钮 模板Javascript 如何在使用vue.js单击按钮后禁用按钮,javascript,vue.js,vuetify.js,Javascript,Vue.js,Vuetify.js,我正在申请投票。单击投票按钮后,我想禁用该按钮。如何禁用按钮 模板 <v-btn v-for="choice in data.choices" @click="doVote(choice.id)" color="success" v-bind:key="choice.id"> votes: {{ choice.votes }} </v-btn> v-btn有一个您可以使用的;一种方法是创建一个clicked字段来记录您单击的所有按钮
<v-btn
v-for="choice in data.choices"
@click="doVote(choice.id)"
color="success"
v-bind:key="choice.id">
votes: {{ choice.votes }}
</v-btn>
v-btn
有一个您可以使用的;一种方法是创建一个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>
然后在doVote
方法中,在触发事件时,将choice.id
推到clicked
数组:
doVote (vote) {
this.clicked.push(vote)
if (!vote) {
return
}
this.$request.questions.vote(vote).then(res => {
this.fetchData()
})
}
您可以添加另一个变量(在本例中为
投票
),该变量将记录投票,然后您可以使用它来确定是否应禁用按钮(请参见投票.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>
最简单的做法是在按下投票按钮时设置一个变量,然后将其绑定到按钮的“禁用”属性:
v-bind:disabled="hasVoted"
我只是偶然发现了同样的问题,我想我会分享我是如何解决我的问题的,这将再次包括创建另一个数组来记录您在前面的答案中提到的点击,然后通过绑定您的v-btn组件的禁用道具来确定要禁用哪些按钮,如下所示:
<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>
投票:{{choice.voces}
我必须参考Michael的答案,这是我找到解决方案的地方我认为这不会起作用,它会禁用所有按钮,我想,从他的代码中可以看出,选项上有一个迭代器,我认为如果他在API的响应选项中添加status isDisabled会更好?@TahaAzzabi Yeah。你说得对。我完全错过了
for
循环:-
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()
},
v-bind:disabled="hasVoted"
<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>