Vue

by p_russell

HTML

<div id="app">
  <h2>Test watch object</h2>
{{people[2].name}}
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

let fly = new Vue({
    el: '#app',
    data: {
        people: [
          {id: 0, name: 'Ann', age: 27 , sex: 'female'},
          {id: 1, name: 'Frank', age: 32, sex: 'male'},
          {id: 2, name: 'Joe', age: 38, sex: 'male'}
        ]
    },
    
  methods: {
    handleChange (newVal) {
      // Handle changes here!
      console.log(newVal);

     console.log(newVal.name);
     console.log(newVal.age);
    },
  },    
    
    
  mounted () {
    this.people.forEach((val) => {
    console.log(val.name);
      this.$watch(() => val.age, this.handleChange, {deep: true});
    });
  },
});




setTimeout(() => {
  fly.people[2].name= "mr x";
}, 4000)
setTimeout(() => {
  fly.people[2].age= "39";
}, 6000)