When you want to remove an element from an array based on a filter, it’s easy to think of splice or filter:

/* let index = arr.indexof (val) index! /* let index = arr.indexof (val) index! == -1 && arr.splice(index, 1) /* Remove elements from array arr that satisfy the predicate condition */ arr = arr.filter(predicate)Copy the code

To delete an item from an array, if splice is used, you need to know the index of the item to be deleted, and then use the unique node ID to find the corresponding index before removing the item. The process is a bit tedious, so I thought of using Lodash’s remove

/* Remove elements from the array arr that satisfy the predicate condition */ _.remove(arr, predicate)Copy the code

But good times did not last long, in the console to see the array has been successfully removed, but the page still shows that I deleted the element, is a hit immortal small strong! And I’m sure that the array is bound in both directions. With doubt on the Internet a search, sure enough, Lodash remove pit!! Click to see how it works

The reason for this is that Vue changes the prototype method of observing an Array so that when it operates on the corresponding method, it triggers the update response, whereas Lodash’s remove method operates on the Array using the splice method of the Array prototype, so it does not trigger the response update.

Finally, I had to obediently use splice to remove the array…