Vue – Deep watching an array of objects and calculating the change?

by

Your comparison function between old value and new value is having some issue. It is better not to complicate things so much, as it will increase your debugging effort later. You should keep it simple.

The best way is to create a person-component and watch every person separately inside its own component, as shown below:

<person-component :person="person" v-for="person in people"></person-component>

Please find below a working example for watching inside person component. If you want to handle it on parent side, you may use $emit to send an event upwards, containing the id of modified person.

Vue.component('person-component', {
    props: ["person"],
    template: `
        <div class="person">
            {{person.name}}
            <input type="text" v-model="person.age"/>
        </div>`,
    watch: {
        person: {
            handler: function(newValue) {
                console.log("Person with ID:" + newValue.id + " modified")
                console.log("New age: " + newValue.age)
            },
            deep: true
        }
    }
});

new Vue({
    el: '#app',
    data: {
        people: [
          {id: 0, name: 'Bob', age: 27},
          {id: 1, name: 'Frank', age: 32},
          {id: 2, name: 'Joe', age: 38}
        ]
    }
});
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<body>
    <div id="app">
        <p>List of people:</p>
        <person-component :person="person" v-for="person in people"></person-component>
    </div>
</body>

More Related Contents:

  1. Vue.js dynamic images not working
  2. Vuejs Error: The client-side rendered virtual DOM tree is not matching server-rendered
  3. Vuex state on page refresh
  4. Vuejs and Vue.set(), update array
  5. [Vue warn]: Property or method is not defined on the instance but referenced during render
  6. How to watch store values from vuex?
  7. NavigationDuplicated Navigating to current location (“/search”) is not allowed
  8. How to listen for ‘props’ changes
  9. Accessing Vuex state when defining Vue-Router routes
  10. Vue JS: Difference of data() { return {} } vs data:() => ({ })
  11. Vuejs typescript this.$refs..value does not exist
  12. Vue.js: Conditional class style binding
  13. Is there any way to ‘watch’ for localstorage in Vuejs?
  14. how to fix ‘Access to XMLHttpRequest has been blocked by CORS policy’ Redirect is not allowed for a preflight request only one route
  15. VueJS/Typescript – Cannot find module ‘./components/Navigation’ or its corresponding type declarations
  16. Access vue instance/data inside filter method
  17. Vue v-on:click does not work on component
  18. Methods vs Computed in Vue
  19. Passing props with programmatic navigation Vue.js
  20. How to set a component non-reactive data in Vue 2?
  21. Vue.js – update router view
  22. How to use Vuetify tabs with vue-router
  23. Force download GET request using axios
  24. Importing javascript file for use within vue component
  25. How to limit iteration of elements in `v-for`
  26. When should I use Vuex?
  27. VueJS conditionally add an attribute for an element
  28. Vue.js – Add class to clicked button
  29. What’s the correct way to pass props as initial data in Vue.js 2?
  30. How to pass an object as props with vue router?

Leave a Comment