Vue: Edit Multiple Items in v-for

by Bruno Sabetta

HTML

<div id="app">
  <h2>Edit Multiple Items in v-for:</h2>
  <br />
  <div>
    editableRows: {{editableRows}}
  </div>
  <div>
    editMap: {{editMap}}
  </div>
  <br />
  <br />

  <div v-for="(item, index) in items" :key="item.id">
    <span>{{ item.text }}</span>
    <button @click="setEdit(item)">Edit</button>
    <br />
    <br />
    <textarea v-if="isEdit(item.id)" :value="editMap[item.id]" @input="updateEditMap(item.id, $event.target.value)">
     </textarea>
    <hr />
  </div>
</div>

CSS

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

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

Vue

new Vue({
  el: "#app",
  data: {
  	editableRows: [],
    editMap: {},
    items: [
      { id: 1, text: "Learn JavaScript" },
      { id: 2, text: "Learn Vue" },
      { id: 3, text: "Play around in JSFiddle" },
      { id: 4, text: "Build something awesome" }
    ]
  },
  methods: {
  	isEdit(id) {
    	return this.editableRows.indexOf(id) >= 0;
    },
  	setEdit(item){
    	if(this.isEdit(item.id)) {
    		this.editableRows = this.editableRows.filter(i => i != item.id);
        this.$delete(this.editMap, item.id);
      } else {
    		this.editableRows.push(item.id);
        this.updateEditMap(item.id, item.text);
      }
    },
    updateEditMap(key, value) {
    	this.editMap = {
      	...this.editMap,
      	[key]: value
      };
    }
  }
})