vue.js - Bootstrap-Vue + Vuelidate:用于创建和更新数据的“对话框”
问题描述
我正在尝试重用对话框表单,但是在尝试更新 Vuelidate 时说表单无效,我不知道为什么。这是我的代码。
<b-modal size="lg" ref="my-modal" hide-footer :title="modalTitle + ' User'">
<form @submit.prevent="onSubmit" @reset.prevent="onReset">
<b-row>
<b-col>
<b-form-input id="input-name"
v-model="form.name"
@input="$v.form.name.$touch()"
:state="$v.form.name.$dirty ? !$v.form.name.$error : null"
placeholder="Name"
trim></b-form-input>
</b-col>
<b-col>
<b-form-input id="input-email"
v-model="form.email"
@input="$v.form.email.$touch()"
:state="$v.form.email.$dirty ? !$v.form.email.$error : null"
placeholder="Email"
trim></b-form-input>
</b-col>
</b-row>
<b-row v-if="mode === 0">
<b-col>
<b-form-input id="input-password"
v-model="form.password"
@input="$v.form.password.$touch()"
:state="$v.form.password.$dirty ? !$v.form.password.$error : null"
type="password"
placeholder="Password"
trim></b-form-input>
</b-col>
<b-col>
<b-form-input id="input-password-confirm"
v-model="form.password_confirmation"
@input="$v.form.password_confirmation.$touch()"
:state="$v.form.password_confirmation.$dirty ? !$v.form.password_confirmation.$error : null"
type="password"
placeholder="Password Confirmation"
trim></b-form-input>
</b-col>
</b-row>
<b-button v-if="mode === 1"
class="mb-1"
:class="visible ? null : 'collapsed'"
:aria-expanded="visible ? 'true' : 'false'"
aria-controls="collapse-4"
@click="visible = !visible">Change Password
</b-button>
<b-collapse v-model="visible" class="mt-2">
<b-form-input id="input-password-edit"
v-model="form.password_edit"
@input="$v.form.password_edit.$touch()"
:state="$v.form.password_edit.$dirty ? !$v.form.password_edit.$error : null"
type="password"
placeholder="New Password"
trim></b-form-input>
</b-collapse>
<b-row>
<b-col>
<b-form-select :options="roles"
v-model="form.role"
@input="$v.form.role.$touch()"
:state="$v.form.role.$dirty ? !$v.form.role.$error : null"
placeholder="User Role"></b-form-select>
</b-col>
</b-row>
<b-row align-h="end" style="padding-left: 1rem; padding-right: 1rem">
<b-button class="mr-1" @click="cancel" variant="secondary">Cancel</b-button>
<b-button type="submit" variant="primary">Save</b-button>
</b-row>
</form>
</b-modal>
data() {
return {
url: '/users',
form: {
name: '',
email: '',
password: '',
password_confirmation: '',
password_edit: '',
role: ''
},
users: [],
roles: [],
}
},
validations: {
form: {
name: {
required
},
email: {
required,
email
},
password: {
required: requiredIf(this.modalTitle() === 'New')
},
password_confirmation: {
required: requiredIf(this.modalTitle() === 'New'),
sameAsPassword: sameAs('password')
},
role: {
required
},
password_edit: {
required: requiredIf(this.modalTitle() === 'Edit')
}
}
},
methods: {
create() {
this.onReset();
this.mode = 0;
this.$refs['my-modal'].show();
},
edit(item) {
this.onReset();
this.mode = 1;
this.form = _.cloneDeep(item);
this.form.role = this.form.roles[0]['id'];
this.$refs['my-modal'].show();
},
onSubmit() {
this.$v.$touch()
console.log(this.$v.invalid);
if (!this.$v.$invalid) {
if (this.mode === 0) {
this.$inertia.post(this.url, {
name: this.form.name,
email: this.form.email,
password: this.form.password,
password_confirmation: this.form.password_confirmation,
role: this.form.role,
}).then(
() => {
if (Object.entries(this.$page.props.errors).length === 0) {
this.$refs['my-modal'].hide();
this.onReset();
this.$bvToast.toast('New User Created', {
title: 'Action Successful',
variant: 'success',
toaster: 'b-toaster-top-center',
solid: true
});
}
}
)
} else {
console.log('here')
this.$inertia.put(this.url + '/' + this.form.id, {
name: this.form.name,
email: this.form.email,
role: this.form.role,
password_edit: this.form.password_edit
}).then(
() => {
if (Object.entries(this.$page.props.errors).length === 0) {
this.$refs['my-modal'].hide();
this.onReset();
this.$bvToast.toast('User Updated', {
title: 'Action Successful',
variant: 'success',
toaster: 'b-toaster-top-center',
solid: true
});
}
}
)
}
}
},
},
在onSubmit()
如果我添加 aconsole.log
之后它会停止工作,if (!this.$v.$invalid)
这意味着我没有正确使用 Vuelidate,但是在我尝试使用时的验证中出现requiredIf
错误
创建钩子时出错:“TypeError:无法读取未定义的属性‘modalTitle’”
TypeError:无法读取未定义的属性“modalTitle”
this.modelTitle()
是一个计算属性,我也尝试过,required: requiredIf(this.mode === 1)
但我得到了同样的错误。
我该如何解决它,以便在创建必填字段时包括password
并且password_confimation
在编辑时不需要它们?
解决方案
解决方案是像这样更改验证器,在我的情况下,为了能够编辑密码,使用变量打开一个部分,visible
因此只有当该部分可见时才需要新密码,如果该部分不可见则密码不需要改变。
validations: {
form: {
password: {
required: requiredIf(function (pass) {
return !this.form.id
}),
},
password_confirmation: {
required: requiredIf(function (pass) {
return !this.form.id
}),
sameAsPassword: sameAs('password')
},
password_edit: {
required: requiredIf(function (pass) {
return this.form.id && this.visible
}),
}
}
},
推荐阅读
- javascript - this.filter 不是函数
- gremlin - 将 Gremlin GraphTraversal 结果与字符串连接起来
- qt - 将 JSON 文件读入 QJsonDocument
- javascript - 如何等待 JS 承诺值
- java - 这是一个多余的 NullPointerException 捕获吗?
- opencv - OpenCV - 从网络摄像头读取时的缓冲区尺寸
- html - HTML 表单验证未出现
- elasticsearch - 如何在 ElasticSearch Aggregation 中包含所有文档并避免 sum_other_doc_count > 0
- rust - 构建 rust Rocket api 时出现“root 中没有'Json'”错误
- reactjs - react-i18next:字符串未翻译