I have 2 formfields Title and Link, when typing a text into Title also link gets the same value.
Something goes wrong with updateValue method, this wil execute twice.
How can i achieve that both fields getting there own values?
App.vue
<form-input v-on:input="handleTitle" :label="'title'" :labelvalue="'Titel'" :type="'text'" :placeholder="''" :name="'title'" :value="title" :classname="'form-control'" :id="''"></form-input>
<form-input v-on:input="handleLink" :label="'Link'" :labelvalue="'Link'" :type="'text'" :placeholder="''" :name="'link'" :value="title" :classname="'form-control'" :id="''"></form-input>
data() {
return {
title: '',
link: '',
}
}
methods: {
handleTitle: function (evt) {
this.title = evt.target.value
},
handleLink: function (evt) {
this.link = evt.target.value
},
Template:
<input v-on:input="updateValue($event)" :type="type" :placeholder="placeholder" :name="name" :value="value" :class="classname" :id="id">
export default {
props: {
type: String,
placeholder: String,
name: String,
value: String,
classname: String,
id: String,
label: String,
labelvalue: String
},
methods: {
updateValue: function (evt) {
console.log(this.$emit('input', evt))
this.$emit('input', evt)
}
}
}
Your prop :value have the same variable in both <form-input :value="title"> change one to <form-input :value="link">
Related
I have a custom input component that generally works well. But since yesterday I want to pass to it a value from the parent component in certain cases (namely if a cookie is found for that field, pre-fill the field with the cookie value).
Parent component (simplified):
<custom-input
v-model="userEmail"
value="John Doe"
/>
But for a reason I cannot comprehend, the value prop doesn't work. Why not?
My custom input component (simplified):
<template>
<input
v-bind="$attrs"
:value="value"
#blur="handleBlur"
>
</template>
<script>
export default {
inheritAttrs: false,
props: {
value: {
type: String,
default: ''
}
},
mounted () {
console.log(this.value) // displays nothing, whereas it should display "John Doe"
},
methods: {
handleBlur (e) {
this.$emit('input', e.target.value)
}
}
}
</script>
value prop is used with the emitted event input to do the v-model job, so you should give your prop another name like defaultValue to avid this conflict:
<custom-input
v-model="userEmail"
defaultValue="John Doe"
/>
and
<template>
<input
v-bind="$attrs"
:value="value"
#blur="emitValue($event.target.vaklue)"
>
</template>
<script>
export default {
inheritAttrs: false,
props: {
value: {
type: String,
default: ''
},
defaultvalue: {
type: String,
default: ''
},
},
mounted () {
this.emitValue(this.defaultValue)
},
methods: {
emitValue(val) {
this.$emit('input', val)
}
}
}
</script>
Vue 3
I am trying to update the value of the data variable from the Axios response. If I print the value in the parent component it's getting printed and updates on the response but the variable's value is not updating in the child component.
What I am able to figure out is my child component is not receiving the updated values. But I don't know why is this happening.
input-field is a global component.
Vue 3
Parent Component
<template>
<input-field title="First Name" :validation="true" v-model="firstName.value" :validationMessage="firstName.validationMessage"></input-field>
</template>
<script>
export default {
data() {
return {
id: 0,
firstName: {
value: '',
validationMessage: '',
},
}
},
created() {
this.id = this.$route.params.id;
this.$http.get('/users/' + this.id).then(response => {
this.firstName.value = response.data.data.firstName;
}).catch(error => {
console.log(error);
});
},
}
</script>
Child Component
<template>
<div class="form-group">
<label :for="identifier">{{ title }}
<span class="text-danger" v-if="validation">*</span>
</label>
<input :id="identifier" :type="type" class="form-control" :class="validationMessageClass" :placeholder="title" v-model="inputValue">
<div class="invalid-feedback" v-if="validationMessage">{{ validationMessage }}</div>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
required: true,
},
validation: {
type: Boolean,
required: false,
default: false,
},
type: {
type: String,
required: false,
default: 'text',
},
validationMessage: {
type: String,
required: false,
default: '',
},
modelValue: {
required: false,
default: '',
}
},
emits: [
'update:modelValue'
],
data() {
return {
inputValue: this.modelValue,
}
},
computed: {
identifier() {
return this.title.toLowerCase().replace(/ /g, '-').replace(/[^\w-]+/g, '');
},
validationMessageClass() {
if (this.validationMessage) {
return 'is-invalid';
}
return false;
}
},
watch: {
inputValue() {
this.$emit('update:modelValue', this.inputValue);
},
},
}
</script>
The reason your child will never receive an update from your parent is because even if you change the firstName.value your child-component will not re-mount and realize that change.
It's bound to a property that it internally creates (inputValue) and keeps watching that and not the modelValue that's been passed from the parent.
Here's an example using your code and it does exactly what it's supposed to and how you would expect it to work.
It receives a value once (firstName.value), creates another property (inputValue) and emits that value when there's a change.
No matter how many times the parent changes the firstName.value property, the child doesn't care, it's not the property that the input v-model of the child looks at.
You can do this instead
<template>
<div class="form-group">
<label :for="identifier"
>{{ title }}
<span class="text-danger" v-if="validation">*</span>
</label>
<input
:id="identifier"
:type="type"
class="form-control"
:class="validationMessageClass"
:placeholder="title"
v-model="localValue" // here we bind localValue as v-model to the input
/>
<div class="invalid-feedback" v-if="validationMessage">
{{ validationMessage }}
</div>
</div>
</template>
<script>
export default {
... // your code
computed: {
localValue: {
get() {
return this.modelValue;
},
set(value) {
this.$emit("update:modelValue", value);
},
},
},
};
</script>
We remove the watchers and instead utilize a computed property which will return the modelValue in it's getter (so whenever the parent passes a new value we actually use that and not the localValue) and a setter that emits the update event to the parent.
Here's another codesandbox example illustrating the above solution.
I have a computed property that I use as v-model on an input. I've written it this way to get reactivity -- this calls my setText Vuex action which I then can get with my getter text. It looks like this:
text: {
get() {
return this.text;
},
set(value) {
this.setText(value);
},
},
and I use it in my input like this:
<input class="input" type="text" v-model="text" />
This works well. Now, I've put the input in question into a separate component which I use. This means I have to pass the text v-model as props, which I do with :model.sync, like so:
<myInput :model.sync="text"/>
and in the myInput component I use the props like so:
<input class="input" id="search-order" type="text" :value="model" #input="$emit('update:model', $event)">
But this doesn't seem to work at all, whenever I type into the input, the input says: [object InputEvent] and if I try to see and the value of model it's {isTrusted: true}. I'm assuming it's because of the getters and setters I have on my computed property. How do I pass these down to the child component?
Instead of using the .sync modifier you can support the v-model directive in your custom component. v-model is syntax sugar for a value prop and an input event.
To support v-model just make sure your custom component has a value prop and emits an input event with the new value: this.$emit('input', event.target.value).
Here is an example of a <BaseInput> component I use, it's written in TypeScript:
<template>
<input
:type="type"
:value="value"
class="input"
v-on="listeners"
>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
name: 'BaseInput',
props: {
type: {
type: String,
default: 'text',
},
value: {
type: [String, Number],
default: '',
},
lazy: {
type: Boolean,
default: false,
},
number: {
type: Boolean,
default: false,
},
trim: {
type: Boolean,
default: false,
},
},
computed: {
modelEvent(): string {
return this.lazy ? 'change' : 'input'
},
parseModel(): (value: string) => string | number {
return (value: string) => {
if (this.type === 'number' || this.number) {
const res = Number.parseFloat(value)
// If the value cannot be parsed with parseFloat(),
// then the original value is returned.
return Number.isNaN(res) ? value : res
} else if (this.trim) {
return value.trim()
}
return value
}
},
listeners(): Record<string, Function | Function[]> {
return {
...this.$listeners,
[this.modelEvent]: (event: HTMLElementEvent<HTMLInputElement>) =>
this.$emit(this.modelEvent, this.parseModel(event.target.value)),
}
},
})
</script>
You can use it like so:
<BaseInput v-model="text" />
I have 2 fields to validate but always returns true in the method validateBeforeSubmit() after i submit.
Whitout button submit it works nice and returns errors.first(name) in the good language
What do i do wrong?
App.vue:
<form #submit.prevent="validateBeforeSubmit">
<form-input v-on:input="handleTitle" :validate="'required|email'" label="email" labelvalue="email" type="text" placeholder="" name="email" :value="title" classname="form-control" id=""></form-input>
<form-input v-on:input="handleLink" :validate="'required'" label="Link" labelvalue="Link" type="text" placeholder="" name="link" :value="link" classname="form-control" id=""></form-input>
methods: {
validateBeforeSubmit() {
this.$validator.validateAll().then((result) => {
if (result) {
// eslint-disable-next-line
alert('Form Submitted!');
return;
}
alert('Correct them errors!');
});
},
Input.vue:
<template>
<div>
<div class="form-group">
<span>{{ errors.first(name) }}</span>
<label v-if="label" :for="label" v-html="labelvalue"></label>
<input v-validate="validate" v-on:input="updateValue($event)" :type="type" :placeholder="placeholder" :name="name" :value="value" :class="classname" :id="id">
</div>
</div>
</template>
export default {
props: {
validate: String,
type: String,
placeholder: String,
name: String,
value: String,
classname: String,
id: String,
label: String,
labelvalue: String
},
methods: {
updateValue: function (evt) {
this.$emit('input', evt)
}
}
}
validateAll does not look into the child component. You have to inject parent validator. Add inject: ['$validator'] in Input.vue file. It should solve the problem. The export block will look like this
export default {
inject: ['$validator'],
props: {
validate: String,
type: String,
placeholder: String,
name: String,
value: String,
classname: String,
id: String,
label: String,
labelvalue: String
},
methods: {
updateValue: function (evt) {
this.$emit('input', evt)
}
}
}
For more informatin about inject you can look into this reference
Ik have the following input.vue template, everything works fine, but how can i implement/add a class if after input some text and and validate has no errors?
<input
v-validate="validate"
v-on:input="updateValue($event)"
:type="type"
:placeholder="placeholder"
:name="name" :value="value"
:class="{'form-control':'form-control','errorinput': errors.has(name)}"
:id="id">
export default {
inject: ['$validator'],
props: {
validate: String,
type: String,
placeholder: String,
name: String,
value: String,
classname: String,
id: String,
label: String,
labelvalue: String
},
methods: {
updateValue: function (evt) {
console.log(this.errors);
this.$emit('input', evt)
}
}
}
after validate, the field would have a dirty flag. You can get a dirty flag by doing $validator.fields.find({ name: name }).flags.dirty.
This is an example of how you can add a class after validated while without error, by combining dirty and errors.has
:class="{
'form-control':'form-control',
'errorinput': errors.has(name),
'noerrorinput': $validator.fields.find({ name: name })
&& $validator.fields.find({ name: name }).flags.dirty
&& !errors.has(name)
}"