vue自定义组件中有2个<input>输入框,使用v-model该如何绑定?

我在Vue component中定义了2个<input>输入框,我想将这两个输入框的value用v-model分别绑定到父组件,但是我只找到了绑定一个的方法,分别绑定2个该如何操作呢?

如下代码不管在哪个输入框输入内容,searchText的值都会改变,相当于两个<input>的值绑定到了一个searchText上,用v-model如何将它们分开绑定呢?


<div id='app'>
    <my-component v-model='searchText'></my-component>
    <p>{{ searchText }}</p>
</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:'#app',
        data:{
            searchText:'start edit'
        }
    })

回答:

解决这个问题有几种方式,可以不需要v-model,通过props接收父组件2个值,$emit传递2个事件到父组件,也可以强行使用v-model采用 liximomo 的聚合多个值的方式。聚合方式代码如下:

<div id="app">
    <my-component v-model="search"></my-component>
    <p>name: {{ search.name }}</p>
    <p>age : {{ search.age }}</p>
</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: '#app',
        data: {
            search: {
                name:'edit name',
                age:18
            }
        }
    })
</script>

回答:

用两个model吧,可以不要用v-model,这只是官方提供的一个语法糖

<div id='app'>
    <my-component model1='searchText1' model2='searchText2' @input1="val=>searchText1=val" @input2="val=>searchText2=val"></my-component>
    <p>{{ searchText }}</p>
</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:'#app',
        data:{
            searchText:'start edit'
        }
    })

回答:

你现在input-one 和 input-two 绑定的都是value

你一个是val1 另一个是val2 props:[‘val1′,’val2’] 不就行了

回答:

这种情况说明你应该聚合你的多个值, 把他们的整体当做一个 model.

<div id='app'>
    <!–– search 是一个对象 { name: '', age: '' } ––>
    <my-component v-model='search'></my-component>
    <p>{{ searchText }}</p>
</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>`

回答:

怎么去动态循环绑定多个input的model啊

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注