如何使用vuelidate访问另一个字段

Question

我正在为使用vuelidate发货的表单制作一些验证器。目前我正在检查postalCode的格式是否正确。这个字段取决于国家字段(因为不同的国家有不同的邮政编码格式。不过我在访问视图模型本身时遇到了问题，而且我在vuelidates文档中没有得到解释。

目前，我正在使用以下经过编辑的代码：

import Vue from 'vue';
import {validationMixin} from 'vuelidate';
import {required} from 'vuelidate/lib/validators';
import {getEuMembers} from 'is-eu-member';
import countries from 'i18n-iso-countries';
import postalCodes from 'postal-codes-js';
new Vue({
el: '#app',
mixins: [shoppingBagMixin, validationMixin],
data: {
form: {
country: {},
postalCode: '',
// more data...
},
},
validations: {
form: {
$each: {required},
country: {
},
postalCode: {
// ----------- The following 3 lines are problematic ----------
validPostalCode: (value) => { 
if (!this.country || !this.country.code) return false; 
return postalCodes.validate(this.country.code, value);
},
},
},
},
methods: {
euCountries: euCountries,
async onSubmit(event) {
this.$v.$touch();
if (this.$v.$invalid) {
return false; // TODO: Show error
}
// Sending data using fetch()
return false;
},
},
});
/**
* Returns a list of EU country codes and translated names
* @param {String} lang Language to translate the country name to.
* Needs to be a code such as 'nl' or 'en'
* @return {Array} Array of {code: ISOCode, name: name} objects
*/
function euCountries(lang) {
countries.registerLocale(require(`i18n-iso-countries/langs/${lang}.json`));
return getEuMembers().map((ISOCode) => {
const name = countries.getName(ISOCode, lang, {});
return {code: ISOCode, name: name};
});
}

为了完整起见，请提供以下表单的一个片段：

<fieldset>
<legend>Adres:</legend>
<label for="country">Land:</label>
<select id="country" name="country" v-model="form.country" type="text">
<option v-once v-for="country in euCountries('nl')" :value="country">{{country.name}}</option>
</select>
<label for="postalCode">Postcode:</label>
<input id="postalCode" name="postalCode" v-model="form.postalCode" type="text">
</fieldset>

Answer 1

this上下文在某些情况下可能正在使用(而不是在本例中(。但它显然不能作为arrow函数中的组件实例使用。

如文档所示，组件实例在自定义验证器中可用作第二个参数：

validPostalCode: (value, vm) => { 
// vm.country 
...

这适用于Vuelidate 0.x，与2.x和composition API的工作方式不同。

Answer 2

this将引用vm，如果这样使用的话(请注意validations现在是一个函数(：

data () {
return {
myProperty: 'my-property',
otherProperty: 'other-property'
}
},
validations () {
return {
myProperty: {
sameAs: myCustomValidator(this.otherProperty)
}
}
}