[Vuejs]-Vue.js inline edit component is sorted by lodash before save

by

2👍

✅

You need to avoid the direct mutation of the item inside the child component. Instead just notify the parent once the "Save" button was pressed that data actually changed.
I have updated your fiddle:
https://jsfiddle.net/uqbvLy4x/

The gist of it:

Setup a watcher for changes to the item so that you clone it for local changes inside the child component:

  watch: {
    item: {
       handler: function (item) {
            this.mutableItem = _.clone(item)
       },
       immediate: true
    }
  }

Let the parent know that an item was updated in the child component inside the save function:

save: function(item) {
    this.editMode = false     
    this.$emit('update:item', this.mutableItem)
}

Capture and process the information about a changed item inside the parent:

<single-item v-for="item in orderedItems" :item="item" :key="item.id"
       @update:item="onItemUpdated"></single-item>

   onItemUpdated: function (mutableItem) {
     console.log(mutableItem)
     const itemIndex = _.findIndex(this.items, item => {
       return item.id === mutableItem.id
      })
      this.items.splice(itemIndex, 1, mutableItem)
   }

I am sure that there are other and potentially better solutions to this, but this was how i handled this.

EDIT: To be more specific about the watcher: You only need the watcher and clone if you pass down a complete object! This is because you basically are getting a reference to the original object. This is also stated in the documenation:

Note that objects and arrays in JavaScript are passed by reference, so
if the prop is an array or object, mutating the object or array itself
inside the child component will affect parent state.

https://v2.vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow

👤puelo

Leave a comment