Vue.js - Come controllare correttamente i dati nidificati

Sto cercando di capire come guardare correttamente per qualche variazione di prop. Ho un componente genitore (file .vue) che riceve dati da una chiamata Ajax, inserisce i dati all'interno di un oggetto e li usa per rendere alcuni componenti figlio attraverso una direttiva v-for, sotto una semplificazione della mia implementazione:

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

... quindi all'interno del <script>tag:

 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]);
            }
    });
}

gli oggetti oggetto sono così:

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

Ora, all'interno del componente "player" di mio figlio, sto cercando di verificare la variazione delle proprietà di qualsiasi articolo e utilizzo:

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

Funziona ma mi sembra un po 'complicato e mi chiedevo se questo è il modo giusto di farlo. Il mio obiettivo è quello di eseguire alcune azioni ogni volta che propcambia o myArrayottiene nuovi elementi o alcune variazioni all'interno di quelli esistenti. Ogni suggerimento sarà apprezzato.

Puoi usare un deep watcher per questo:

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

Questo ora rileverà eventuali modifiche agli oggetti itemnell'array e aggiunte all'array stesso (se usato con Vue.set ). Ecco un JSFiddle: http://jsfiddle.net/je2rw3rs/

MODIFICARE

Se non vuoi guardare per ogni modifica sull'oggetto di livello superiore e vuoi solo una sintassi meno imbarazzante per guardare direttamente gli oggetti nidificati, puoi semplicemente guardare un computedinvece:

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

Ecco il JSFiddle: http://jsfiddle.net/oa07r5fw/

Un altro buon approccio e un po 'più elegante è il seguente:

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

(Ho imparato questo approccio da @peerbolte nel commento qui )

VueJs deep watch in oggetti figlio

new Vue({
    el: "#myElement",
    data: {
        entity: {
            properties: []
        }
    },
    watch: {
        'entity.properties': {
            handler: function (after, before) {
                // Changes detected. Do work...     
            },
            deep: true
        }
    }
});

E se vuoi guardare una proprietà per un po 'e poi non guardarla?

O per guardare una proprietà del componente figlio della libreria?

Puoi utilizzare il "watcher dinamico":

this.$watch(
 'object.property', //what you want to watch
 (newVal, oldVal) => {
    //execute your code here
 }
)

Il $watchrestituisce una funzione unwatch che si fermerà a guardare se viene chiamato.

var unwatch = vm.$watch('a', cb)
// later, teardown the watcher
unwatch()

Inoltre puoi usare l' deepopzione:

this.$watch(
'someObject', () => {
    //execute your code here
},
{ deep: true }
)

Assicurati di dare un'occhiata ai documenti

Non vederlo menzionato qui, ma è anche possibile utilizzare il vue-property-decoratormodello se si sta estendendo la Vueclasse.

import { Watch, Vue } from 'vue-property-decorator';

export default class SomeClass extends Vue {
   ...

   @Watch('item.someOtherProp')
   someOtherPropChange(newVal, oldVal) {
      // do something
   }

   ...
}

Un altro modo per aggiungere che ho usato per "hackerare" questa soluzione era quello di fare questo: ho impostato un computedvalore separato che avrebbe semplicemente restituito il valore dell'oggetto nidificato.

data : function(){
    return {
        my_object : {
            my_deep_object : {
                my_value : "hello world";
            }.
        },
    };
},
computed : {
    helper_name : function(){
        return this.my_object.my_deep_object.my_value;
    },
},
watch : {
    helper_name : function(newVal, oldVal){
        // do this...
    }
}

Il mio problema con la risposta accettata dell'utilizzo deep: trueè che quando si guarda in profondità un array, non riesco facilmente a identificare quale elemento dell'array contiene la modifica. L'unica soluzione chiara che ho trovato è questa risposta, che spiega come creare un componente in modo da poter guardare ogni elemento dell'array singolarmente.

Tracciamento di singoli elementi modificati in un elenco

Se vuoi guardare tutti gli elementi in un elenco e sapere quale elemento nell'elenco è cambiato, puoi impostare osservatori personalizzati su ogni elemento separatamente, in questo modo:

var vm = new Vue({
  data: {
    list: [
      {name: 'obj1 to watch'},
      {name: 'obj2 to watch'},
    ],
  },
  methods: {
    handleChange (newVal, oldVal) {
      // Handle changes here!
      // NOTE: For mutated objects, newVal and oldVal will be identical.
      console.log(newVal);
    },
  },
  created () {
    this.list.forEach((val) => {
      this.$watch(() => val, this.handleChange, {deep: true});
    });
  },
});

Se la tua lista non è popolata immediatamente (come nella domanda originale), puoi spostare la logica createdda dove necessario, ad esempio all'interno del .then()blocco.

Guardando un elenco di modifica

Se la tua stessa lista si aggiorna per avere elementi nuovi o rimossi, ho sviluppato un modello utile che "superficiale" controlla la lista stessa e guarda / sblocca dinamicamente gli oggetti quando la lista cambia:

// NOTE: This example uses Lodash (_.differenceBy and _.pull) to compare lists
//       and remove list items. The same result could be achieved with lots of
//       list.indexOf(...) if you need to avoid external libraries.

var vm = new Vue({
  data: {
    list: [
      {name: 'obj1 to watch'},
      {name: 'obj2 to watch'},
    ],
    watchTracker: [],
  },
  methods: {
    handleChange (newVal, oldVal) {
      // Handle changes here!
      console.log(newVal);
    },
    updateWatchers () {
      // Helper function for comparing list items to the "watchTracker".
      const getItem = (val) => val.item || val;

      // Items that aren't already watched: watch and add to watched list.
      _.differenceBy(this.list, this.watchTracker, getItem).forEach((item) => {
        const unwatch = this.$watch(() => item, this.handleChange, {deep: true});
        this.watchTracker.push({ item: item, unwatch: unwatch });
        // Uncomment below if adding a new item to the list should count as a "change".
        // this.handleChange(item);
      });

      // Items that no longer exist: unwatch and remove from the watched list.
      _.differenceBy(this.watchTracker, this.list, getItem).forEach((watchObj) => {
        watchObj.unwatch();
        _.pull(this.watchTracker, watchObj);
        // Optionally add any further cleanup in here for when items are removed.
      });
    },
  },
  watch: {
    list () {
      return this.updateWatchers();
    },
  },
  created () {
    return this.updateWatchers();
  },
});

Nessuna delle risposte per me funzionava. In realtà, se si desidera controllare i dati nidificati con i componenti chiamati più volte. Quindi vengono chiamati con diversi oggetti di scena per identificarli. Ad esempio, la <MyComponent chart="chart1"/> <MyComponent chart="chart2"/> mia soluzione alternativa è quella di creare una variabile di stato Vuex aggiuntiva, che aggiorno manualmente per puntare alla proprietà che è stata aggiornata per l'ultima volta.

Ecco un esempio di implementazione di Vuex.ts:

export default new Vuex.Store({
    state: {
        hovEpacTduList: {},  // a json of arrays to be shared by different components, 
                             // for example  hovEpacTduList["chart1"]=[2,6,9]
        hovEpacTduListChangeForChart: "chart1"  // to watch for latest update, 
                                                // here to access "chart1" update 
   },
   mutations: {
        setHovEpacTduList: (state, payload) => {
            state.hovEpacTduListChangeForChart = payload.chart // we will watch hovEpacTduListChangeForChart
            state.hovEpacTduList[payload.chart] = payload.list // instead of hovEpacTduList, which vuex cannot watch
        },
}

Su qualsiasi funzione Componente per aggiornare il negozio:

    const payload = {chart:"chart1", list: [4,6,3]}
    this.$store.commit('setHovEpacTduList', payload);

Ora su qualsiasi componente per ottenere l'aggiornamento:

    computed: {
        hovEpacTduListChangeForChart() {
            return this.$store.state.hovEpacTduListChangeForChart;
        }
    },
    watch: {
        hovEpacTduListChangeForChart(chart) {
            if (chart === this.chart)  // the component was created with chart as a prop <MyComponent chart="chart1"/> 
                console.log("Update! for", chart, this.$store.state.hovEpacTduList[chart]);
        },
    },