There are two < input > input boxes in the vue custom component. How can I bind them using v-model?
I have defined two < input > input boxes in Vue component. I want to bind the value of these two input boxes to the parent component with v-model, but I have only found a way to bind one. What should I do if I bind two each?
the following code changes the value of searchText no matter which input box is entered, which means that the values of two < input > are bound to a searchText. How to bind them separately with v-model?
<div id="app">
<my-component v-model="searchText"></my-component>
{{ searchText }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component("my-component", {
props:["value"],
template:`
<div>
<label for="input-one">
name:
<input id="input-one"
v-bind:value="value"
v-on:input="$emit("input", $event.target.value)""></input>
</label>
<label for="input-two">
age:
<input id="input-two"
v-bind:value="value"
v-on:input="$emit("input", $event.target.value)""></input>
</label>
</div>`
})
var app = new Vue({
el:"-sharpapp",
data:{
searchText:"start edit"
}
})
use two model, but don't use vMel model. This is just a syntax sugar provided by the government
.
<div id='app'>
<my-component model1='searchText1' model2='searchText2' @input1="val=>searchText1=val" @input2="val=>searchText2=val"></my-component>
{{ searchText }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component("my-component", {
props:['model1', 'model2'],
template:`
<div>
<label for='input-one'>
name:
<input id='input-one'
v-bind:value='model1'
v-on:input="$emit('input1', $event.target.value)""></input>
</label>
<label for='input-two'>
age:
<input id='input-two'
v-bind:value='model2'
v-on:input="$emit('input2', $event.target.value)""></input>
</label>
</div>`
})
var app = new Vue({
el:'-sharpapp',
data:{
searchText:'start edit'
}
})
there are several ways to solve this problem, either receiving two values of the parent component through props, passing two events to the parent component through $emit, or forcibly using v-model 's way of aggregating multiple values using liximomo. The code of aggregation method is as follows:
<div id="app">
<my-component v-model="search"></my-component>
name: {{ search.name }}
age : {{ search.age }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('my-component',{
props: ['value'],
template:`
<div>
<label for='input-one'>
name:
<input id='input-one'
v-bind:value='value.name'
v-on:input="$emit('input', {name: $event.target.value, age: value.age})""></input>
</label>
<label for='input-two'>
age:
<input id='input-two'
v-bind:value='value.age'
v-on:input="$emit('input', {name: value.name, age: $event.target.value})""></input>
</label>
</div>`
})
var app = new Vue({
el: '-sharpapp',
data: {
search: {
name:'edit name',
age:18
}
}
})
</script>
you now bind input-one and input-two to value
one of you is val1 and the other is val2 props: ['val1','val2'].
this situation means that you should aggregate your multiple values and treat them as a model.
.
<div id='app'>
<! search { name: '', age: '' } >
<my-component v-model='search'></my-component>
{{ searchText }}
</div>
props:['value'],
template:`
<div>
<label for='input-one'>
name:
<input id='input-one'
v-bind:value='value.name'
v-on:input="$emit('input', { ... value, name: $event.target.value})""></input>
</label>
<label for='input-two'>
age:
<input id='input-two'
v-bind:value='value.age'
v-on:input="$emit('input', { ... value, age: $event.target.value})""></input>
</label>
</div>`
how to dynamically loop bind multiple input model
