Vue.js - how to have multiple inputs in a component

Question

I have just started learning Vue.js and I am trying to get the values from my components. Is there a way to have multiple input fields in my component and get the value of each outside of the component?

For example, if I wanted to get and change the value for both of my input fields in my simple-input component. Right now they both have the same value but I would like to have 2 different values in each input.

My component

Vue.component('simple-input', {

    template: `
        <div>
            <input type="text" :value="value" @input="$emit('input', $event.target.value)">
            <input type="text" :value="value" @input="$emit('input', $event.target.value)">
        </div>
    `,

    props: ['value']

});

main.js

new Vue({
    el: '#root',

    data: {
        value1: 'Initial value 1',
        value2: 'Initial value 2',
        value3: 'Initial value 3'
    },

    methods: {
        alertSimpleInput1() {
            alert(this.value1);
            this.value1 = 'new';
        }
    }
});

HTML

<simple-input v-model="value1"></simple-input>
<simple-input v-model="value2"></simple-input>
<simple-input v-model="value3"></simple-input>

<button @click="alertSimpleInput1">Show first input</button>

You could use an array for each value instead of a string.

Husam Elbashir
– Husam Elbashir

2018-12-08 08:38:48 +00:00
Commented Dec 8, 2018 at 8:38 — Husam Elbashir
– Husam Elbashir, Commented Dec 8, 2018 at 8:38

yuriy636 · Accepted Answer · 2018-12-08 09:06:55Z

2

if you want to have different values for each input you have two choices:

set two props rather one for each component and assign each prop to one input.
use one input for each components (with one prop) and use different components for get different inputs.

first implementation:

Vue.component('simple-input', {

    template: `
        <div>
            <input type="text" :value="value1" @input="$emit('input', $event.target.value)">
            <input type="text" :value="value2" @input="$emit('input', $event.target.value)">
        </div>
    `,

    props: ['value1','value2']

});

new Vue({
    el: '#root',

    data: {
        value11: 'Initial value 11',
        value12: 'Initial value 12',
        value21: 'Initial value 21',
        value22: 'Initial value 22',
        value31: 'Initial value 31',
        value32: 'Initial value 32'
    },

    methods: {
        alertSimpleInput1() {
            alert(this.value11);
            this.value11 = 'new';
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root">
  <simple-input :value1="value11" :value2="value12"></simple-input>
  <simple-input :value1="value21" :value2="value22"></simple-input>
  <simple-input :value1="value31" :value2="value32"></simple-input>
  

  <button @click="alertSimpleInput1">Show first input</button>
</div>

edited Dec 8, 2018 at 9:06

yuriy636

11.7k6 gold badges39 silver badges43 bronze badges

answered Dec 8, 2018 at 8:29

Alizadeh118

1,08411 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Liga Over a year ago

Thanks, that's what I was looking for! I am still trying to understand how it all works.

Liga Over a year ago

I see my mistake was using v-model instead of :value1 and :value2

Alizadeh118 Over a year ago

but it is error-prone, this component usage is not very common and probably correct, think differently and check this again !

Liga Over a year ago

Thanks, I will try to do better once I understand the basics. This example was very useful. Still trying to understand why we need @input="$emit('input' ....

vahid sabet Over a year ago

But it wont update component props. how can we do that?

Collectives™ on Stack Overflow

Vue.js - how to have multiple inputs in a component

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related