Vue.js - Как правильно следить за вложенными свойствами

Question

Я пытаюсь понять, как правильно следить за некоторыми вариантами поддержки. У меня есть родительский компонент (файлы .vue), которые принимают данные из вызова ajax, помещают данные внутри объекта и используют его для рендеринга некоторого дочернего компонента через директиву v-for, ниже упрощения моей реализации:

<template> 
    <div> 
     <player v-for="(item, key, index) in players" 
      :item="item" 
      :index="index" 
      :key="key""> 
     </player> 
    </div> 
</template> 

... затем в "сценарий" тег:

data(){ 
    return { 
     players: {} 
}, 
created(){ 
     let self = this; 
     this.$http.get('../serv/config/player.php').then((response) => { 
      let pls = response.body; 
      for (let p in pls) { 
       self.$set(self.players, p, pls[p]); 
      } 
    }); 
} 

вещь объекты, как это:

item:{ 
    prop: value, 
    someOtherProp: { 
     nestedProp: nestedValue, 
     myArray: [{type: "a", num: 1},{type: "b" num: 6} ...] 
    }, 
} 

Теперь внутри моего ребенка "игрок" compone нт я пытаюсь наблюдать за изменением какого-либо предмета собственности, и я использую:

... 
watch:{ 
    'item.someOtherProp'(newVal){ 
     //to work with changes in "myArray" 
    }, 
    'item.prop'(newVal){ 
     //to work with changes in prop 
    } 
} 

Это работает, но это, кажется, немного сложнее для меня, и мне было интересно, если это правильный способ сделать это. Моя цель состоит в том, чтобы выполнить какое-то действие каждый раз, когда «подпирать» изменение или туАггау получает новые элементы или некоторые вариации внутри существующих Любое предложения будет appriciated

Answer 1

Вы можете использовать deep watcher для этого:

watch{ 
    item: { 
    handler(val){ 
     // do stuff 
    }, 
    deep: true 
    } 
} 

Этих теперь обнаружит любые изменения объектов в массиве item и дополнения к самому массиву (при использовании с Vue.set). Вот JSFiddle: http://jsfiddle.net/je2rw3rs/

EDIT

Если вы не хотите, чтобы следить за каждое изменение на объекте верхнего уровня, и просто хотите менее неуклюжий синтаксис для просмотра вложенных объектов напрямую, вы можете просто смотреть computed вместо:

var vm = new Vue({ 
    el: '#app', 
    computed: { 
    foo() { 
     return this.item.foo; 
    } 
    }, 
    watch: { 
    foo() { 
     console.log('Foo Changed!'); 
    } 
    }, 
    data: { 
    item: { 
     foo: 'foo' 
    } 
    } 
}) 

Вот JSFiddle: http://jsfiddle.net/oa07r5fw/

Answer 2

еще один хороший подход и один, который немного больше элегантный выглядит следующим образом:

watch:{ 
    'item.someOtherProp': function (newVal, oldVal){ 
     //to work with changes in someOtherProp 
    }, 
    'item.prop': function(newVal, oldVal){ 
     //to work with changes in prop 
    } 
} 

(я узнал этот подход от @peerbolte в comment here)