title: Vue.js - how to have multiple inputs in a component
body: <p>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?</p>
  
  <p>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.</p>
  
  <p><strong>My component</strong></p>
  
  <pre><code>Vue.component('simple-input', {
  
      template: `
          &lt;div&gt;
              &lt;input type="text" :value="value" @input="$emit('input', $event.target.value)"&gt;
              &lt;input type="text" :value="value" @input="$emit('input', $event.target.value)"&gt;
          &lt;/div&gt;
      `,
  
      props: ['value']
  
  });
  </code></pre>
  
  <p><strong>main.js</strong></p>
  
  <pre><code>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';
          }
      }
  });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;simple-input v-model="value1"&gt;&lt;/simple-input&gt;
  &lt;simple-input v-model="value2"&gt;&lt;/simple-input&gt;
  &lt;simple-input v-model="value3"&gt;&lt;/simple-input&gt;
  
  &lt;button @click="alertSimpleInput1"&gt;Show first input&lt;/button&gt;
  </code></pre>