VeeValidate附加方法:字段有名称时缺少" name“或"data-vv-name”属性。
VeeValidate附加方法:字段有名称时缺少" name“或"data-vv-name”属性。
提问于 2018-10-24 11:50:42
我有一个父组件，呈现一个个人详细信息组件，并且正在注入父组件的验证器作用域。如果我使用v-validate指令和this.$validator.validateAll()或this.$validator.validate('field_name')，这很好。
但是，我需要独立地验证一些字段，但是当使用this.$validator.attach('first_name', 'required')时--例如，我得到了下面的警告[vee-validate] A field is missing a "name" or "data-vv-name" attribute。我已经尝试移动调用，将验证器附加到单击处理程序中，以防输入元素在从mounted()调用它时没有完全呈现，但仍然会遇到相同的问题。我还分别尝试了name或data-vv-name属性。
Parent.ts
import { Vue, Component } from 'vue-property-decorator';
import PersonalDetailsComponent from './PersonalDetails';
@Component({
template: `
<div class="container">
<personal-details-component></personal-details-component>
<div class="row">
<Button :onClick="handleButtonClick" :buttonText="'Validate'"></Button>
</div>
</div>
`,
components: {
PersonalDetailsComponent,
},
$_veeValidate: {validator: 'new'}
})
export default class ClaimComponent extends Vue {
mounted() {
this.attachValidators();
}
handleButtonClick() {
this.$validator.validateAll();
}
attachValidators() {
console.log(document.getElementsByName('first_name')); // Finds the element
this.$validator.attach('first_name', 'required');
this.$validator.attach('surname', 'required');
this.$validator.attach('email', 'required');
}
}PersonalDetails.ts
import {Vue, Component, Inject} from 'vue-property-decorator';
import {Validator} from 'vee-validate';
@Component({
template: `
<div class="row">
<div class="col-12">
<form class="material-form">
<div class="group w-third">
<input v-model="first_name" type="text" name="first_name" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>First name</label>
<span class="form-text error-text">{{ errors.first('first_name') }}</span>
</div>
<div class="group w-third">
<input v-model="surname" type="text" name="surname" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Surname</label>
<span class="form-text error-text">{{ errors.first('surname') }}</span>
</div>
<div class="group w-third">
<input v-model="email" type="text" name="email" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Email address</label>
<span class="form-text error-text">{{ errors.first('email') }}</span>
</div>
</form>
</div>
</div>
`
})
export default class PersonalDetailsComponent extends Vue {
@Inject('$validator') public $validator!: Validator;
first_name: string = '';
surname: string = '';
email: string = '';
}回答 3
Stack Overflow用户
回答已采纳
发布于 2018-10-25 09:40:01
通过使用data-vv-validate-on属性和一个自定义事件，我成功地实现了我所需要的--特定字段的验证。通过这种方式，当单击按钮时，我可以在任何需要验证的输入上触发事件。
父组件更新为：
@Component({
template: `
<div class="container">
<personal-details-component ref="personalDetails"></personal-details-component>
<div class="row">
<Button :onClick="handleButtonClick" :buttonText="'Validate'"></Button>
</div>
</div>
`,
components: {
PersonalDetailsComponent,
},
$_veeValidate: {validator: 'new'}
})
export default class ClaimComponent extends Vue {
$refs!: {
personalDetails: PersonalDetailsComponent
}
handleButtonClick() {
this.$refs.personalDetails.validateInput();
}
}和PersonalDetails组件：
@Component({
template: `
<div class="row">
<div class="col-12">
<form class="material-form">
<div class="group w-third">
<input v-model="first_name" ref="firstName" type="text" name="first_name"
v-validate="'required'"
data-vv-validate-on="validateStep" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>First name</label>
<span class="form-text error-text">{{ errors.first('first_name') }}</span>
</div>
<div class="group w-third">
<input v-model="surname" ref="surname" type="text" name="surname"
v-validate="'required'"
data-vv-validate-on="validateStep" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Surname</label>
<span class="form-text error-text">{{ errors.first('surname') }}</span>
</div>
<div class="group w-third">
<input v-model="email" ref="email" type="text" name="email"
data-vv-validate-on="validateStep" v-validate="'required|email'"
required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Email address</label>
<span class="form-text error-text">{{ errors.first('email') }}</span>
</div>
</form>
</div>
</div>
`
})
export default class PersonalDetailsComponent extends Vue {
@Inject('$validator') public $validator!: Validator;
$refs!: {
firstName: HTMLInputElement,
surname: HTMLInputElement,
email: HTMLInputElement
}
first_name: string = '';
surname: string = '';
email: string = '';
public validateInput() {
this.$refs.firstName.dispatchEvent(new Event('validateStep'));
this.$refs.surname.dispatchEvent(new Event('validateStep'));
this.$refs.email.dispatchEvent(new Event('validateStep'));
}
}我仍然不明白为什么attach方法不起作用，但是这个替代方法确实有效。
Stack Overflow用户
发布于 2018-10-24 15:11:03
我想你可能想错了。理想情况下，验证逻辑应该在子组件中，而不是父组件中。但是应该仍然能够使用父来运行验证。当您从父节点注入验证器实例时，您应该能够将您的子组件更新为以下内容：
export default class PersonalDetailsComponent extends Vue {
@Inject('$validator') public $validator!: Validator;
first_name: string = '';
surname: string = '';
email: string = '';
public mounted() {
this.$validator.attach('first_name', 'required');
this.$validator.attach('surname', 'required');
this.$validator.attach('email', 'required');
}
}然后，您可以从父对象中删除attachValidators方法。这应该将这些验证规则附加到父级提供的验证器实例。因此，从理论上讲，父程序可以运行this.$validator.validateAll();，并且应该根据子组件中的规则进行验证。
Stack Overflow用户
发布于 2021-03-19 07:06:16
就我而言，data-vv-name="someName"失踪了。例如，当您有两个类似的控件时，名称相同的字段将相互冲突，因此为了解决这个问题，您可以使用v-autocomplete。示例如下：
<v-autocomplete
v-model="id"
:items="items"
:label="$t('scheduling.fields.truck-id')"
:placeholder="$t('common.words.none')"
readonly
:disabled="!canEdit"
:append-icon="''">
</v-autocomplete>`
<v-autocomplete
v-model="id2"
:items="items2"
:label="label2"
:placeholder="$t('common.words.none')"
readonly
data-vv-name="someName"
:disabled="!canEdit"
:append-icon="''">
</v-autocomplete>`页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52968276
复制相关文章
相似问题
腾讯云开发者
