Отключить кнопку после одного клика в Vue.js

Вопрос задан: 8 месяцев назад Последняя активность: 8 месяцев назад
up 0 down

Я создаю новое приложение с помощью Vue.js и наткнулся на то, что, по моему мнению, было бы простой проблемой, но пока не могу найти решение.

У меня есть вопрос с тремя ответами. Я только хочу, чтобы пользователь мог щелкнуть ответ один раз, который я знаю, что могу использовать @click.once но мне нужно, чтобы пользователь знал, что он больше не активен в пользовательском интерфейсе. Я пробовал что-то вроде <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 ответ

up 3 down accepted

Проходить $event в качестве третьего аргумента, затем в обработчике, event.target.disabled = true

Это действительно быстрый и грязный подход, и это нормально, если это конец пути для кнопок. Более надежный подход состоит в том, чтобы создать компонент для использования для каждой из кнопок и иметь переменную состояния для определения, отключена ли она.