我在使用VueJS
和使用Vee-validate
.
我正在尝试确认另一个密码,但感觉好像找不到密码的参考。我正在使用 ref 并一直在寻找所有存在的问题,但它仍然不能解决我的问题。
<template>
<div :class="customClass" v-if="show">
<label :for="name" v-if="label">{{ label }}</label>
<div class="relative">
<input class="w-full" :class="{ 'is-danger': errors.has(name, scope) }" :type="inputHidden? 'password' : 'text'" :data-vv-scope="scope" :data-vv-as="label.toLowerCase()" v-validate="`${validate}`" :id="name" :name="name" v-model="newValue">
<div @click="inputHidden = !inputHidden">
<icon-eye class="h-4 absolute pin-r pin-t mt-2 mr-2 cursor-pointer" width="25" v-show="!inputHidden" />
<icon-disabled-eye class="h-4 absolute pin-r pin-t mt-2 mr-2 cursor-pointer" width="25" v-show="inputHidden" />
</div>
<span :class="`${customClass}-error`" v-if="errors.has(name, scope)">{{ errors.first(name, scope) }}</span>
</div>
</div>
</template>
<script>
并递归调用组件:
<div class="mb-4" v-for="field in forms.password.fields" :key="field.name">
<component :is="field.type" v-model="forms.password.values[field.name]" :name="field.name" :placeholder="field.placeholder" :label="field.label" :custom-label-class="field.customLabelClass" :scope="field.scope" :validate="field.validate" :elements="field.elements" :show="field.show" :on-change="field.onChange" />
</div>
通过提供这些道具:
password: {
values: {
password: ''
},
fields: [{
name: 'password',
type: 'input-password',
label: this.$t('commons.labels.new-password'),
validate: 'required|verify_password'
}, {
name: 'confirmPassword',
type: 'input-password',
label: this.$t('commons.labels.confirm-new-password'),
validate: 'required|confirmed:$password'
}].map((item) => {
item['scope'] = 'password'
return item
}),
这是我的沙箱,用于显示问题所在。