Vue.js Multiple inputs value

by Roland Doda

HTML

<div id="app">
  <template v-for="item in list" :key="list.id">
    <input type="text" :value="item.name" @input="changeList($event, item.id, 'name')">
    <input type="text" :value="item.last_name" @input="changeList($event, item.id, 'last-name')">
    Your full name is {{item.name}} {{item.last_name}}
    <hr>
  </template>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data: {
    list: [
      { id: 1, name: "name1", last_name: 'last_name 1' },
      { id: 2, name: "name2", last_name: 'last_name 2' },
      { id: 3, name: "name3", last_name: 'last_name 3' },
      { id: 4, name: "name4", last_name: 'last_name 4' }
    ]
  },
  methods: {
  	changeList(event, id, property) {
    	let value = event.target.value
      
      for (item of this.list) {
      	if (item.id === id) {
        	if(property === 'name') {
          	item.name = value
          }else if (property === 'last-name') {
          	item.last_name = value
          }
        }
      }
    }
  }
})