:disabled 表单按钮在 Vue 3 中不起作用

Posted

技术标签:

【中文标题】:disabled 表单按钮在 Vue 3 中不起作用【英文标题】::disabled Form button not working in Vue 3 【发布时间】:2021-03-20 13:16:39 【问题描述】:

我正在尝试使用状态来禁用和启用表单按钮切换。 如果我勾选复选框, :disable 将变为 true 并且可以使用按钮。但似乎在 Vue 3 中不起作用?

代码如下:

<template lang="pug">
.container
  .row
    .col-lg-12.desktop-sign-up
      .row.no-gutters
        .col-lg-6
          .image-container
            img.logo-container(src=".././assets/images/logo.png")
        .col-lg-6
          form.sign-in-form
            img.sign-in-image(src=".././assets/images/logo.png")
            .sign-in-header
              h1 Hello
            .sign-in-content
              h4 Please create <br/>an account to continue.
              .form-group
                input.form-control(placeholder="Username" type="text" v-model="user.username")
              .form-group
                input.form-control(placeholder="Email Address" type="email" v-model.lazy="user.email")
              .form-group(style="margin-bottom: 0;")
                input.form-control(placeholder="Password" type="password" v-model="user.password")
              .form-check
                input.form-check-input(id="customeCheck1" type="checkbox" v-model="user.isTncChecked")
                label.form-check-label(for="customCheck1") I agree with our 
                  router-link(:to="'/'" target="_blank") Terms 
                  | and 
                  router-link(:to="'/'" target="_blank") Conditions
                  | .
              .error-msg
                p(v-for="item in errorMsg" :class=" success : isSuccess " )  item.msg 
              .cta-conainer
                a.cta.cta-submit(href="" @click.prevent="handleSubmit" :disabled="isDisabled") Sign up
              .sign-in-msg
                p Already have an account.
                  a(href="#") Sign in here
</template>
<script>
import axios from 'axios'
export default 
  name: 'Register',
  components: 
  ,
  directives: 
  ,
  data() 
    return 
      user: 
        username: '',
        email: '',
        first_name:'',
        last_name:'',
        password: '',
        tracks: [],
        dateCreated: '',
        profile_pic: '',
        isTncChecked: false
      
    
  ,
  beforeCreate() 
  ,
  mounted () 
  ,
  computed: 
    isDisabled () 
      return !this.user.isTncChecked
    
  ,
  methods: 

</script>

它适用于 Vue 2。 找不到有关 vue 3 重大更改如何影响这一点的任何信息。希望任何人都可以帮助我理解这一点。

谢谢

【问题讨论】:

【参考方案1】:

&lt;a&gt; 标签没有disabled 属性,请改用&lt;button&gt;

button.cta.cta-submit(@click.prevent="handleSubmit" :disabled="isDisabled") Sign up

或者使用CSS改变&lt;a&gt;的样式:

a.disabled 
  pointer-events: none;
  cursor: default;

或者你可以检查isDisabled里面的handleSubmit

handleSubmit() 
  if (!this.isDisabled) 
  
  

【讨论】:

以上是关于:disabled 表单按钮在 Vue 3 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章

物化表单在 vue.js 组件中不起作用

提交按钮在 Bootstrap 表单中不起作用

Django 表单在 html 模板中不起作用,它只是显示按钮

Angular 表单验证 ng-disabled 不起作用

Angular 表单在 Internet Explorer 11 中不起作用

HTML 提交按钮在 macOS 10.13 上的 chrome 中不起作用