CODEWITHSUNDEEP
javascriptvue.js
Liga
Liga

Reputation: 3439

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

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>

Upvotes: 1

Views: 6752

Answers (1)

Alizadeh118
Alizadeh118

Reputation: 1064

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

  1. set two props rather one for each component and assign each prop to one input.
  2. 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>

Upvotes: 2

Related Questions