vue do not update correctly when use Array.prototype.splice.call to modify data

Vue.js version

1.0.21

Reproduction Link

• The example code without using call
• The example code with using call

Steps to reproduce

just click the apple or orange

in the first example without using call(this.items.splice), you can see that the clicked item is deleted from page. In the second example with using call(Array.prototype.splice.call), the clicked item is still here, but you can see it deleted from items array in the console log.

What is Expected?

I want to know why using Array.prototype.splice.call make vue not work. i search the call function on MDN.

** the description of it **

the call() method calls a function with a given this value and arguments provided individually.

so, i can’t figure out why, any one could explain it, thanks~

[akaibukai]

Hello @Toilal, I just hit the same problem with lodash _.remove() function using VueJS… Another workaround could be to use the replacing an array method with the lodash _.reject() function which does not mutate the array.

[prog-rajkamal]

The reason is that Array.prototype.splice and this.items.splice are different functions.

When Vue makes an array reactive, it modifies the splice function, so that Vue is notified when array is changed.

So when you use Array.prototype.splice.call, you modify the array, but Vue is not notiifed. but when you use this.items.splice, Vue is notified.

Source : Vuejs Guide