相关文章推荐
性感的香槟  ·  Electron中常用对话框-打开文件对话框 ...·  1 月前    · 
体贴的甘蔗  ·  HTML:无障碍的良好基础 - 学习 ...·  1 月前    · 
活泼的小熊猫  ·  jquery實例演練01 - iT ...·  3 周前    · 
活泼的红烧肉  ·  【Day11】 發生什麼事 - ...·  1 周前    · 
逃跑的土豆  ·  【开发问题】非法访问:此Web应用程序实例已 ...·  2 年前    · 
八块腹肌的小蝌蚪  ·  typescript include ...·  2 年前    · 
逃课的手套  ·  Object.equals重写,判断对象相等 ...·  2 年前    · 
健壮的茶壶  ·  [Solved] How to use ...·  2 年前    · 
Code  ›  在Vue.js中单击一次后禁用按钮开发者社区
按钮
https://cloud.tencent.com/developer/ask/sof/834480
耍酷的甘蔗
2 年前
首页
学习
活动
专区
工具
TVP
返回腾讯云官网
提问
问 在Vue.js中单击一次后禁用按钮
Stack Overflow用户
提问于 2019-01-14 21:10:35
EN

我正在用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!"
 
推荐文章
性感的香槟  ·  Electron中常用对话框-打开文件对话框、保存文件对话框、提示对话框 - 霸道流氓
1 月前
体贴的甘蔗  ·  HTML:无障碍的良好基础 - 学习 Web 开发 | MDN
1 月前
活泼的小熊猫  ·  jquery實例演練01 - iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天
3 周前
活泼的红烧肉  ·  【Day11】 發生什麼事 - Events - iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天
1 周前
逃跑的土豆  ·  【开发问题】非法访问:此Web应用程序实例已停止。无法加载[]。为了调试以及终止导致非法访问的线程,将抛出以下堆栈跟踪。_非法访问此web应用程序实例已停止-CSDN博客
2 年前
八块腹肌的小蝌蚪  ·  typescript include global.d.ts-掘金
2 年前
逃课的手套  ·  Object.equals重写,判断对象相等 - 知乎
2 年前
健壮的茶壶  ·  [Solved] How to use JavaScript in ASP.Net - CodeProject
2 年前
今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号