Array observation when modified by Array.prototype.splice

[GuillaumeLeclerc]

Vue.js version

1.0.21

Reproduction Link

http://www.webpackbin.com/4JE1cYtyW

Steps to reproduce

• watch an array by putting it in the data property
• Make the template display the array
• remove an element using Array.prototype.splice.call(this.arr, 0)

What is Expected?

• The first element of the array is removed from the view

What is actually happening?

• The first element is removed from the array but not from the view

Explanation

I read the source code from the observing feature of vue. As far as I understood Vue intercept calls to methods. Using Array.prototype make this strategy fail (it would work with the dirty check in Angular 1.x for example). I know it will not be easily fixable nor it's a good practice to use Array.prototype. But actually it's how lodash is implemented (I found this "bug" when using lodash) And I this kind of library is very widely used.

Intent to fix

Maybe we could fix it by doing this ?

const originalSplice = Array.prototype.splice;

Array.prototype.splice = function() {
  if (this && this.length) {
    this.splice(arguments)
  } else {
    originalSplice.apply(this, arguments)
  }
} 

[posva]

Hello,

This is working as intended. You'll find a better explanation here 😄

Can you provide more info about the lodash function you're using?

[GuillaumeLeclerc]

• I'm using _.remove
• Why is it working if I use arr.splice(0) then ?

The part of the documentation points that:

• We can't watch assignments
• We can't watch setting length to 0

And removing an elements does not fit any in any of this two cases

[posva]

@GuillaumeLeclerc Thanks, I'll take a deeper look later and keep you updated 🙂

[yyx990803]

@GuillaumeLeclerc I like your proposed fix - with some small adjustments:

arrayProto[method] = function () {
  let fn = this && this.__ob__ ? interceptor : original
  return fn.apply(this, arguments)
}

However this also has its problems: lodash caches reference to Array.prototype.splice, so if it's included before Vue then _.remove still wouldn't trigger changes.

[yyx990803]

As a result - I don't think Vue can guarantee reactivity when you use a "blackbox" 3rd party lib. The recommended approach: when using lodash, always use immutable methods that returns a copy. So instead of _.remove, use _.filter and replace the original array.

[GuillaumeLeclerc]

I ended up using _.findIndex and the normal splice I think it has better performance than recreating the whole array.

Thanks

[cvrnogueira]

i am facing the same issue in vuejs 2.0, anybody knows if was fixed somehow?

[LinusBorg]

It wasn't, and it can't, really. This is a limitation that comes with the Reactivity system of Vue.

[ziazon]

since _.remove doesn't work with Vue, I ended up simply creating a method that traverses the object and deletes the element marked for deletion regardless of the depth. here's the method I created granted it was my first pass at it.

    deepClean (obj, keys) {
      if (keys.length === 0) return

      let currkey = keys[0]

      if (keys.length === 1) {
        obj.splice(currkey, 1)
      } else {
        keys.splice(0, 1)
        this.deepClean(obj[currkey], keys)
      }
    }

and the way I use it is I build the path to what I want deleted as an array so this.whatever.0.children.5.children.9 would be the element path, I'd pass

deepClean (this.whatever, [0,'children',5,'children',9]) 

and whant ends up happening is this.whatever gets updated accordingly regardless of depth.

there are other ways of doing it (that requires less code) am sure, but this works.

[MichalKrakow]

just bumped here,
since _.remove doesnt work (since it's dont perform change trough assignment) just reverse it and assign.
_.remove returns what was removed from array so reverse the condition and assign the result back.

in my case this works perfect:
this.selectedImages = _.remove(this.selectedImages, function(n){ return n.id !== id; });

[LoveMeWithoutAll]

just bumped here,
since _.remove doesnt work (since it's dont perform change trough assignment) just reverse it and assign.
_.remove returns what was removed from array so reverse the condition and assign the result back.

in my case this works perfect:
this.selectedImages = _.remove(this.selectedImages, function(n){ return n.id !== id; });

In my case, it doesn't work when array has only one item.