[Vuejs]-How to add edit function to todolist application

by

1👍

✅

You emit ‘custom-click’ from listItem, that’s good. Next is to listen to the event in the parent (listView) and re-emit to the next parent, app.vue. Once app.vue has the item, you need to pass it back down as a prop to your AddItemForm.vue component and set it as the <input> v-model.

This is basically what you need to add to each component:

listView.vue (re-emit)

<list-item
  :item="item"
  class="item"
  v-on:itemchanged="$emit('reloadlist')"
  @custom-click="$emit('custom-click', $event)"
/>

App.vue (listen to emit, find matching item in this.items, send it down as prop to addItemForm)

<div class="heading">
  <h2 id="title">TodoList</h2>
  <add-item-form v-on:reloadlist="getList()" :editItem="editItem" />
</div>
<list-view :items="items" v-on:reloadlist="getList()" @custom-click="edit" />

data: function () {
  editItem: null
},
methods: {
  edit(item) {
    this.editItem = this.items.find(i => i.name === item);
  }
}

AddItemForm.vue (set v-model using prop)

props: {
  editItem: {
    type: Object,
    default() {
      return null;
    }
  }
},
watch: {
  editItem(newItem) {
    this.item = newItem;
  }
}
👤yoduh

Leave a comment