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

Question

我正在用 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."
        }
    }
}
}

Answer 1

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

这确实是一种快速而肮脏的方法，只要这是按钮之路的尽头就可以了。一个更健壮的方法是为每个按钮制作一个组件，并有一个状态变量来确定它是否被禁用。