vue js v-for input type with v-model

Question

I want two input field with name1 and name2, name1 = Peter, name2= Kitty. But i have not any idea to handle it.

<div v-for="list in item">
    <input type="text" id="name" name="name" v-model="name"></>
    {{list.name}}
</div>

data() {
    return {
        item: [{ name: 'Peter' },{ name: 'Kitty' }],
        name: ''
    }
}

here i want:

input type="text" id="name1" name="name2" v-model="name1"><--Show Peter

input type="text" id="name1" name="name2" v-model="name2"><--Show Kitty

Answer 1

If you have multiple input elements you want to display, you should also have multiple slots of where you will put the data. For example, you could do it like this, by adding a value property to the item element:

new Vue({
  el: '#app',
  data: {
    items: [
      { name: 'Peter', value: '' },
      { name: 'Kitty', value: '' }
    ],
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-for="item in items">
    <label>{{item.name}}:</label>
    <input type="text" name="item.name" v-model="item.value">
  </div>

  <!-- Output for debugging purposes -->
  {{items}}
</div>