How to watch for changes in objects inside javascript array?

Question

I am creating a Todo app using electron and vue.js

I have an array of objects named items. Each object have the following syntax:

{id: <Number>, item: <String>, complete: <Boolean>, starred: <Boolean>}

I want to save the items array in a file whenever any content (including object attributes) change inside the array for which I need to watch for the changes.

I have tried Vue's watch, but it only triggers when an object is added or removed and not when an object's attributes change.

Here's a screenshot of the program with devTools open. I added an item, starred it and completed it. So, I expect 3 console logs but I get only one (when the object is added).

Any ideas??

samayo · Accepted Answer · 2018-02-21 10:34:03Z

1

Use deep to watch object changes:

watch{
  item: {
     handler(newValue, oldValue){
       // something
     },
     deep: true
  }
}

answered Feb 21, 2018 at 10:34

samayo

16.5k13 gold badges95 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Thomas · Accepted Answer · 2018-02-21 10:34:57Z

1

If you use Vue.set() then the props of each item-object are reactive too.

answered Feb 21, 2018 at 10:34

Thomas

2,5461 gold badge19 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to watch for changes in objects inside javascript array?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related