: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】:<a>
标签没有disabled
属性,请改用<button>
。
button.cta.cta-submit(@click.prevent="handleSubmit" :disabled="isDisabled") Sign up
或者使用CSS改变<a>
的样式:
a.disabled
pointer-events: none;
cursor: default;
或者你可以检查isDisabled
里面的handleSubmit
:
handleSubmit()
if (!this.isDisabled)
【讨论】:
以上是关于:disabled 表单按钮在 Vue 3 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章
Django 表单在 html 模板中不起作用,它只是显示按钮