投票申し込みをしています。投票ボタンをクリックしたら、ボタンを無効にしたいのですが。ボタンを無効にする方法。
テンプレート
<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()
},
v-btn
has disabled
property 使用できます;これを行う1つの方法は、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()
})
}
最も簡単な方法は、投票ボタンが押されたときに変数を設定し、それをボタンの「無効」プロパティにバインドすることです。
v-bind:disabled="hasVoted"
投票を記録する別の変数(この場合は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()
},