在Vue.js中单击一次后禁用按钮

时间:2019-01-14 13:10:35

标签: javascript vue.js vuejs2 vue-component

我正在用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 个答案:

答案 0 :(得分:3)

传递$event作为第三个参数,然后在处理程序中传递event.target.disabled = true

这确实是一种快速而肮脏的方法,只要这是完成按钮操作的尽头,就可以了。一种更健壮的方法是使每个按钮都可以使用一个组件,并为它是否禁用设置一个状态变量。