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

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

Asked on November 19, 2018 in vue.js.
Add Comment


  • 1 Answer(s)

       The problem is between comparison method former and new value. Just make it easy.

    The greatest technique is to generate person-element and watch all person distinctly within a personal element.

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

    While you are handling it on parent section, then use $emit to lead event aloft that contains the id of the changed 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="scirpturl"></script>
    <body>
        <div id="app">
            <p>List of people:</p>
            <person-component :person="person" v-for="person in people"></person-component>
        </div>
    </body>
    
    Answered on November 19, 2018.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.