How do I watch a large array?

[mark-hahn]

I have a large array of objects in a data property of a root component. When anything changes in any object I want that object to be sent to the server.

When I put a watch on the entire array it just gives me the old and new values of the entire array. Is there an easy way to find out which object changed? I could do a deep compare of them one-by-one but that seems slow and inelegant.

[mark-hahn]

My problem is worse than I thought. When I get the watch callback the new and old arrays have the same new value for the changed object. I guess this makes sense since the array just has a pointer to an object that has changed, but right now it seems impossible for me to find out which object changed.

How do other vue users determine when to write model data to their backup store?

[vitorarjol]

@mark-hahn Use the track-by param, should help you.

http://vuejs.org/guide/list.html#Using_track-by

[Aranad]

@mark-hahn Did you ever find a good solution to this issue? I'm a Vue noob and have run across the same problem, I have an array many thousands of items long and need to run a heavy process on array items that change. I've found a way to do this efficiently, but I'm guessing there's a much better official way of achieving it.

[mark-hahn]

Aran Dunkley [email protected] wrote:

. I've found a way to do this efficiently, but I'm guessing there's a much better official way of achieving it.

I don't think so. I use get/set routines for every change.

[Aranad]

Does using your own get/set routines mean that you don't use Vue's watchers?

[mark-hahn]

you don't use Vue's watchers?

I do for ones that work.

On Thu, Mar 16, 2017 at 10:27 AM, Aran Dunkley [email protected] wrote:

Does using your own get/set routines mean that you don't use Vue's watchers?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/vuejs/Discussion/issues/336#issuecomment-287131779, or mute the thread https://github.com/notifications/unsubscribe-auth/AAxhv0xCK1o4EH3ztMNM01R2q7e90W5_ks5rmXEJgaJpZM4FoWXJ .

[Aranad]

That seems like quite a design flaw if you can only use watchers for some things, but for others e.g. large arrays you need to use a custom watch solution?! is that really the state of affairs?

[mark-hahn]

This is an old topic but I seem to remember there was an explanation.

On Thu, Mar 16, 2017 at 12:07 PM, Aran Dunkley [email protected] wrote:

That seems like quite a design flaw if you can only use watchers for some things, but for others e.g. large arrays you need to use a custom watch solution?! is that really the state of affairs?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/vuejs/Discussion/issues/336#issuecomment-287160686, or mute the thread https://github.com/notifications/unsubscribe-auth/AAxhv2exz7HEhgpKgYIKc4JJm94gfiQFks5rmYiDgaJpZM4FoWXJ .

[ghost]

I kept coming here when looking for a solution, I found something that works in v2 for a similar case (hundreds of array elements), but it is not with direct binding / watch.

Per https://github.com/vuejs/vue/issues/399#issuecomment-52380130 "$watch isn't intended to provide detailed change records", that is probably the reason.

//-- Your javascript file

const vue = new Vue({
  el: '#vue-content',
  data: function(data) {
    return {
      events: []
    }
  },
  methods: {
    onInput: function(object, attribute, event) {
      Vue.set(object, attribute, event.target.value)
      //update back-end here
    }
  }
})

//Using jquery here
//on-ready function
  //populate vue.events from back-end here

//-- Your HTML file, building a list where the user can edit any property of the array's elements
<li v-for="event,index in events" :key="event.id" v-cloak>
  <input type="text" :value="event.text" @input="onInput(event, 'text', $event)" />
...