Question

69

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

rated 0 times [ 74] [ 5] / answers: 1 / hits: 6286 / 6 Years ago, sat, december 8, 2018, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

xochitl

Add To Favorites

Follow

Total Points: 559

Total Questions: 95

Total Answers: 117

Location: Antigua and Barbuda

Member since Sat, Apr 24, 2021

3 Years ago

xochitl questions

1 Jest - [Function anonymous] in expect

Wed, Sep 30, 20, 00:00, 4 Years ago

1 How to fix this json email pattern

Thu, Apr 18, 19, 00:00, 5 Years ago

1 window.addEventListener on a message emitted from an iframe

Mon, Feb 4, 19, 00:00, 5 Years ago

1 How do I make one div scroll slower or faster than other items on the page, using pure CSS or CSS/JS (without JQuery)?

Wed, Sep 12, 18, 00:00, 6 Years ago

1 Dismiss reactstrap modal when clicking outside of it

Sun, Aug 26, 18, 00:00, 6 Years ago

View All

answered 6 Years ago kenyamelinad · Accepted Answer

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>