Vue.js 引导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>

在

onSubmit（）

中，如果我添加了

console.log

它将在

之后停止工作，如果（！this.$v.$invalid）

这意味着我没有正确使用Vuelidate，但在尝试使用

requiredIf

时的验证中，我得到了一个错误

创建的钩子中出错：“TypeError:无法读取未定义的属性'modalTitle'”

TypeError:无法读取未定义的属性“modalTitle”

this.modelTitle（）

是一个计算属性，我也尝试过执行

required:requiredIf（this.mode==1）

，但我得到了相同的错误

---

如何修复它，以便在创建必填字段时包括

密码

和

密码_确认

，但在编辑时不需要它们？

解决方案是这样更改验证程序，在我的情况下，为了能够编辑密码，将使用变量

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
                }),
            }
        }
    },

    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
                }),
            }
        }
    },