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