Disable a button after one click in Vue.js

Question

I am building out a new app with Vue.js and have come across what I thought would be a simple problem but can not find a solution yet.

I have a question with three answers. I only want the user to be able to click an answer once which I know I can use @click.once but I need to let the user know it is no longer clickable in the UI. I have tried some like <button :disabled="submitted" @click="checkAnswer('q1','3'), submitted = true"></button> but this disables all three buttons at the same time. Can someone please show me how to disable a button once the user has clicked it and keep it independent from other buttons? I really appreciate any help.

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>

Code:

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."
        }
    }
}
}

You need a separate state variable for each button.

user5734311
– user5734311

2019-01-14 13:13:12 +00:00
Commented Jan 14, 2019 at 13:13 — user5734311
– user5734311, Commented Jan 14, 2019 at 13:13

Roy J · Accepted Answer · 2019-01-14 13:30:46Z

10

Pass $event as the third argument, then in the handler, event.target.disabled = true

This is really the quick and dirty approach, which is ok as long as that's the end of the road for the buttons. A more robust approach would be to make a component to use for each of the buttons, and have a state variable for whether it is disabled.

edited Jan 14, 2019 at 13:30

answered Jan 14, 2019 at 13:13

Roy J

44k10 gold badges84 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user5734311 Over a year ago

OP wants to disable the other two buttons.

George Over a year ago

@ChrisG "Can someone please show me how to disable a button once the user has clicked it". Doesn't seem like they want to disable the other two buttons.

Jason Over a year ago

Thank you @Roy That worked! I knew it had to be simple. I can not accept your answer for another 7 minutes but I will

Collectives™ on Stack Overflow

Disable a button after one click in Vue.js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related