Vue.js - How to get and set a value of a component input field?

Question

I just started learning Vue.js but I ran into a problem where I can't figure out how I could access and change a text field value that is inside my component.

Let's say I would like to access or change the value of my first input field that is inside my component

My component

Vue.component('simple-input',
{
    template: `
        <input type="text" value="Some value...">
    `,
});

HTML

<div id="root">
  <simple-input></simple-input>
  <simple-input></simple-input>
  <simple-input></simple-input>

  <div @click="alertSimpleInput1">Show first input value</div>
  <div @click="changeInput1('new value')">Change input value</div>

  <div @click="alertSimpleInput2">Show second input value</div>
</div>

main.js

new Vue({
    el: '#root',
});

You can use v-model to achieve exactly what you want. see here — Andrew1325
– Andrew1325, Commented Dec 7, 2018 at 9:18

tony19 · Accepted Answer · 2022-07-15 21:00:25Z

Having value="Some value..." in your template means that the input's value will be set to the string "Some value..." initially. You need to bind the input's value to a data property on the component. Use v-model for a two-way binding (when the input value changes, it will update the value of the data property and vice versa).

In your example there's actually a bit more involved though since you want to obtain the input's value from the root component, therefore the <simple-input> component must expose this; the way to do this is by using props (for parent-to-child data flow) and events (for child-to-parent data flow).

Untested:

Vue.component('simple-input', {
  template: `
    <input type="text" :value="value" @input="$emit('input', $event.target.value)">
  `,
  props: ['value'],
});

<div id="root">
  <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 value</button>
  <button @click="changeInput1('new value')">Change input value</button>
  <button @click="alertSimpleInput2">Show second input value</button>
</div>

new Vue({
  el: '#root',
  
  data: {
    value1: 'Initial value 1',
    value2: 'Initial value 2',
    value3: 'Initial value 3',
  },

  methods: {
    alertSimpleInput1() {
      alert(this.value1);
    },

    alertSimpleInput2() {
      alert(this.value2);
    },

    changeInput1(newValue) {
      this.value1 = newValue;
    },
  },
});

I understand you're just learning Vue, but there's a lot to unpack here for a beginner. I won't go into detail because there's lots of information about these concepts already.

Read the following:

Component Basics
Using v-model on Components (for an explanation of the <simple-input> code)

Thanks, that's perfect. Although I still don't understand everything how it works. Is it possible to have 2 input fields in my template and bind the value for each of them?

channasmcs · Accepted Answer · 2018-12-07 09:41:05Z

0

you can use $emit method for this purpose.

<simple-input @clicked="inputValue" :name="name"></simple-input>

parent methods

export default {

 data: function () {
    return {
       name:null
    }
  },
  methods: {
   inputValue (value) {
    console.log(value) // get input value
   }
 }
}
  Vue.component('simple-input', {
  data: function () {
    return {
       // name:null
    }
  },
  watch:{
    'name':function(){
        this.$emit('clicked', this.name)
    }
   template: '<input type="text" v-model="name">'
   props:['name']
})

answered Dec 7, 2018 at 9:41

channasmcs

1,15612 silver badges28 bronze badges

Collectives™ on Stack Overflow

Vue.js - How to get and set a value of a component input field?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related