after writing several form pages, I found that encapsulating input seems to save code. Then I found some examples and wrote one myself, but something didn"t seem right. Please take a look at it for me
input component:
< template >
<li>
<h5>{{ title }}</h5>
<input :type="type" @input="$emit("update",keys,$event.target.value)" :value="value" name="" :id="id" :placeholder="placeholder" />
</li> < / template >
< script >
export default {
name: "LiInput",
props: ["title","type","id","placeholder","keys","value"]}
< / script >
parent component call:
< LiInput id= "age" placeholder= "Please enter the age" type= "number" title= "age" keys= "age": value= "age" @ update= "update" / >
data: of the parent component {
age: 18}
parent component"s update method:
update: function (key,value) {
this.$data[key] = value;
console.log(this.$data[key])}
the problem is that, in this way, I need to manually change the value of age. What should I do if I can modify age if I don"t need update?