vue js v-for input type with v-model

3
votes

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

4
vue.js

4 Answers

3
votes

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>
3
votes

The problem is with your v-model. You need to bind it to the name attribute of the object in your item array.

Change v-model="name" to v-model="list.name"

JSFiddle example

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

data() {
    return {
        item: [{ name: 'Peter' },{ name: 'Kitty' }],
        name: ''
    }
}
0
votes
<div v-for="list in item" :key="list.id">
    <input type="text" :id="list.name" :name="list.name" :v-model="list.name"/>
    {{ list.name }}
</div>