0

So even though I have the same objects, array.includes() does not work in Vue unfortunately. My guess is that behind the scenes Vue alters the object, thus includes() sees it as a different object.

export default {
    props: ['sellitem'],
    data(){
        return {
            sells: [ this.sellitem ]
        };
    },
    watch: {
        sellitem(value){
            if( ! this.sells.includes(value)) this.sells.push(value);
        }
    },
}

Periodically the component gets new Prop values so I add them to the array sells. But of course when something is already in the array it should not be pushed inside.

Philipp Mochine
  • 4,351
  • 10
  • 36
  • 68
  • Just a guess: might be a browser limitation. The [`Array#includes`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) method works in Chrome, Safari and Firefox, afaict. – rishat Feb 20 '18 at 10:35
  • Not really, I'm working on Safari and Firefox. Even if I use Lodash Includes, it's the same. Like I said Vue is altering the object somehow. – Philipp Mochine Feb 20 '18 at 10:39
  • Please be more specific. What does not work exactly? Is there an error message? What is `this.sellitem` (primitive type or object)? – str Feb 20 '18 at 10:40
  • @str I have an array with Objects inside. Includes does not see that for example this.sellitem[0] is the same with the new value of watch. So the function pushes it to for example this.sellitem[2]. If I ask the console if: $vm0.sells[0] === $vm0.sells[2] it gives me false! Even though the objects are completely the same. My guess is, because the Object comes from an Ajax request, it changes its intern properties and is thus not the same object anymore, even though every visible attribute is the same, with the same value. – Philipp Mochine Feb 20 '18 at 10:57
  • Thank you! @str Finally, I get this! – Philipp Mochine Feb 20 '18 at 11:09

0 Answers0