I have a component called TextInput. I need to send v-model with @input event in this component, but I also want it to do validation with vee-validate.
我有一个名为TextInput的组件。我需要在此组件中发送带有@Input事件的v-Model,但我也希望它使用vee-valify进行验证。
But when I use the handleChange function in the usefield, it does the validation. But this time I cannot send the value with the v-model.
但当我在usefield中使用handleChange函数时,它会进行验证。但这一次,我不能用V-Model发送价值。
When I do it as follows, I can use the v-model when I use the v-model in the component I call, but it does not do the validation process.
当我这样做时,当我在我调用的组件中使用v模型时,我可以使用v模型,但它不执行验证过程。
<template>
<div
class="TextInput"
:class="{ 'has-error': !!errorMessage, success: meta.valid }"
>
<label :for="name">{{ label }}</label>
<input
:name="name"
:type="type"
:id="name"
:value="modelValue"
:placeholder="placeholder"
@input="handleChange"
@blur="handleBlur"
v-bind="$attrs"
/>
<p class="help-message" v-show="errorMessage || meta.valid">
{{ errorMessage || successMessage }}
</p>
</div>
</template>
<script>
import { useField } from "vee-validate";
export default {
props: {
type: {
type: String,
default: "text",
},
modelValue:String,
value: {
type: String,
default: "",
},
name: {
type: String,
required: true,
},
label: {
type: String,
required: true,
},
successMessage: {
type: String,
default: "",
},
placeholder: {
type: String,
default: "",
},
},
emits: ['update:modelValue'],
setup(props,{emit}) {
const handleChange = (event) =>{
emit('update:modelValue', event.target.value);
}
const {
errorMessage,
handleBlur,
meta,
} = useField(props.name, undefined, {
initialValue: props.value,
});
return {
handleChange,
handleBlur,
errorMessage,
meta,
};
},
};
</script>
When you do it as below, it doesn't send the v-model, but it does the validation correctly.
如下所示,它不会发送v-Model,但会正确地进行验证。
<template>
<div
class="TextInput"
:class="{ 'has-error': !!errorMessage, success: meta.valid }"
>
<label :for="name">{{ label }}</label>
<input
:name="name"
:id="name"
:type="type"
:value="inputValue"
:placeholder="placeholder"
@input="handleChange"
@blur="handleBlur"
/>
<p class="help-message" v-show="errorMessage || meta.valid">
{{ errorMessage || successMessage }}
</p>
</div>
</template>
<script>
import { useField } from "vee-validate";
export default {
props: {
type: {
type: String,
default: "text",
},
value: {
type: String,
default: "",
},
name: {
type: String,
required: true,
},
label: {
type: String,
required: true,
},
successMessage: {
type: String,
default: "",
},
placeholder: {
type: String,
default: "",
},
},
setup(props) {
const {
value: inputValue,
errorMessage,
handleBlur,
handleChange,
meta,
} = useField(props.name, undefined, {
initialValue: props.value,
});
return {
handleChange,
handleBlur,
errorMessage,
inputValue,
meta,
};
},
};
</script>
How can I send both validation and v-model in the same way?
如何以相同的方式发送验证和v-model?
更多回答
优秀答案推荐
You need to add the valueProp
parameter to the useField
constructor and change the prop value
to modelValue
. You also need to introduce a handler for the input event that will call both handleChange
from useField and also emit the proper update:modelValue
event so that the v-model binding will work.
您需要将valueProp参数添加到useField构造函数中,并将prop值更改为ModelValue。您还需要为输入事件引入一个处理程序,该处理程序将从useField调用handleChange,并发出适当的UPDATE:ModelValue事件,以便v-Model绑定能够工作。
This will allow for both validation and the v-model binding to work. I've made the example changes below:
这将允许验证和v模型绑定工作。我对下面的示例进行了更改:
<template>
<div
class="TextInput"
:class="{ 'has-error': !!errorMessage, success: meta.valid }"
>
<label :for="name">{{ label }}</label>
<input
:name="name"
:id="name"
:type="type"
:value="inputValue"
:placeholder="placeholder"
@input="onInput($event)"
@blur="handleBlur"
/>
<p class="help-message" v-show="errorMessage || meta.valid">
{{ errorMessage || successMessage }}
</p>
</div>
</template>
<script>
import { useField } from "vee-validate";
export default {
props: {
type: {
type: String,
default: "text",
},
modelValue: {
type: String,
default: "",
},
name: {
type: String,
required: true,
},
label: {
type: String,
required: true,
},
successMessage: {
type: String,
default: "",
},
placeholder: {
type: String,
default: "",
},
},
setup(props, {emit}) {
const {
value: inputValue,
errorMessage,
handleBlur,
handleChange,
meta,
} = useField(props.name, undefined, {
initialValue: props.modelValue,
valueProp: props.modelValue
});
const onInput = (event) => {
handleChange(event, true)
emit('update:modelValue', event.target.value)
}
return {
onInput,
handleChange,
handleBlur,
errorMessage,
inputValue,
meta,
};
},
};
</script>
v4.11.1 of vee-validate introduced easier v-model support (see official docs here). As of this version the solution posted by Tom Malitz is not working anymore. Here is an updated solution:
VEE-VALIDATE的V4.11.1引入了更简单的V-Model支持(请参阅此处的官方文档)。从这个版本开始,Tom Malitz发布的解决方案不再起作用。以下是更新后的解决方案:
<template>
<div
class="TextInput"
:class="{ 'has-error': !!errorMessage, success: meta.valid }"
>
<label :for="name">{{ label }}</label>
<input
:name="name"
:id="name"
:type="type"
:value="inputValue"
:placeholder="placeholder"
@input="handleChange"
@blur="handleBlur"
/>
<p class="help-message" v-show="errorMessage || meta.valid">
{{ errorMessage || successMessage }}
</p>
</div>
</template>
<script>
import { useField } from "vee-validate";
export default {
props: {
type: {
type: String,
default: "text",
},
modelValue: {
type: String,
default: "",
},
name: {
type: String,
required: true,
},
label: {
type: String,
required: true,
},
successMessage: {
type: String,
default: "",
},
placeholder: {
type: String,
default: "",
},
},
setup(props, {emit}) {
const {
value: inputValue,
errorMessage,
handleBlur,
handleChange,
meta,
} = useField(props.name, undefined, {
syncVModel: true
});
return {
handleChange,
handleBlur,
errorMessage,
inputValue,
meta,
};
},
};
</script>
更多回答
thank you so much :) Great solution again thank you :) sorry for the late response
非常感谢:)非常好的解决方案再次感谢您:)很抱歉回复晚了
Could you please include an example on how to use it? I can't manage to trigger the validations....
你能举一个如何使用它的例子吗?我无法触发验证..。
this does not seem to be working anymore as of at least v.4.11.1. useField has a new option syncVModel
(see vee-validate.logaretm.com/v4/guide/composition-api/…). So the lines initialValue: props.modelValue, valueProp: props.modelValue
have to be replaced with syncVModel: true,
.
至少从v.4.11.1开始,这似乎不再起作用。Usefield有一个新的选项SyncVModel(请参阅vee-validate.logaretm.com/v4/guide/composition-api/…)。因此,必须用syncVModel:TRUE,替换InitialValue:pros.modValue,valueProp:pros.modValue行。
我是一名优秀的程序员,十分优秀!