在Vue.js中单击一次后禁用按钮
在Vue.js中单击一次后禁用按钮
提问于 2019-01-14 21:10:35
我正在用Vue.js构建一个新的应用程序，我遇到了一个我认为是一个简单的问题，但还找不到解决方案。
我有一个有三个答案的问题。我只希望用户能够单击答案一次，我知道我可以使用@click.once，但我需要让用户知道它在UI中不再可点击。我尝试过像<button :disabled="submitted" @click="checkAnswer('q1','3'), submitted = true"></button>这样的按钮，但这会同时禁用所有三个按钮。谁能告诉我如何禁用一个按钮，一旦用户点击它，并保持它独立于其他按钮？我真的很感谢你的帮助。
HTML：
<ul>
<li><button class="btn blue" @click="checkAnswer('q1','1')">Answer 1 for q1</button></li>
<li><button class="btn blue" @click="checkAnswer('q1','2')">Answer 2 for q1</button></li>
<li><button class="btn blue" @click="checkAnswer('q1','3')">Answer 2 for q1</button></li>
</ul>代码：
export default {
name: 'Questions',
props: ['clue'],
data(){
return {
feedback: null,
answer: null,
answers: {
q1: '2',
q2: '1',
q3: '3'
}
}
},
methods: {
checkAnswer(q, a) {
if(a == this.answers[q]){
this.answer = "Congrats!"
} else {
this.answer = "Sorry that was the wrong answer."
}
}
}
}回答 1
Stack Overflow用户
回答已采纳
发布于 2019-01-14 21:13:39
将$event作为第三个参数传递，然后在处理程序中传递event.target.disabled = true
这真的是一种快速而肮脏的方法，只要这是按钮之路的尽头，它就没问题。一种更健壮的方法是为每个按钮创建一个组件，并有一个状态变量来表示它是否被禁用。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54182211
复制相关文章
相似问题
腾讯云开发者
