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">
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments