title: how to get changing input value from v-for in Vue
body: <p>This is a short example that illustrates what I'm curious to solve. </p>
  
  <p>This example will basically display items from an item list and allow a user to adjust the quantity of items through an input box. The default is set to 0 but the customer/user can change it up to 10. </p>
  
  <p>I need to be able to access 2 things: the name of the item ("itemv") and the quantity (through the "val" variable?) of every single adjusted input box in that v-for loop. </p>
  
  <p>Accessing the name of the item is easy, since I already have the items passed as a prop. I can just iterate through. But I am not sure how to access the input values that the user changes. </p>
  
  <p>Do I have to use the key attribute here? How do I iterate through all those InputBox components and get the value?</p>
  
  <pre><code>&lt;template&gt;
  
    &lt;div&gt;
        &lt;span v-for="(itemv,  index) in items" :key="index"&gt;
            &lt;p&gt;{{itemv}}
              &lt;InputBox :value="val" :min="0" :max="10"&gt;&lt;/InputBox&gt;
            &lt;/p&gt;
      &lt;/span&gt;
  
    &lt;/div&gt;
  
  &lt;/template&gt;
  
  
  &lt;script&gt;
  import { EventBus } from '../event-bus.js';
  import InputBox from "./InputBox";
  
  export default {
    name: 'ProductsPage',
    components: {InputBox},
    props: ['items'],
    data: function () {
    return {
        val: 0,
    }
  }
  }
  &lt;/script&gt;
  
  </code></pre>