Estoy tratando de entender cómo observar correctamente alguna variación de accesorios. Tengo un componente principal (archivos .vue) que recibe datos de una llamada ajax, pongo los datos dentro de un objeto y los uso para representar algún componente secundario a través de una directiva v-for, debajo de una simplificación de mi implementación:
<template> <div> <player v-for="(item, key, index) in players" :item="item" :index="index" :key="key""> </player> </div> </template> ... luego dentro de la etiqueta <script> :
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]); } }); }Los objetos del artículo son así:
item:{ prop: value, someOtherProp: { nestedProp: nestedValue, myArray: [{type: "a", num: 1},{type: "b" num: 6} ...] }, }Ahora, dentro del componente "jugador" de mi hijo, estoy tratando de observar la variación de la propiedad de cualquier elemento y uso:
... watch:{ 'item.someOtherProp'(newVal){ //to work with changes in "myArray" }, 'item.prop'(newVal){ //to work with changes in prop } } Funciona, pero me parece un poco complicado y me preguntaba si esta es la forma correcta de hacerlo. Mi objetivo es realizar alguna acción cada vez que cambia la myArray prop nuevos elementos o alguna variación dentro de los existentes. Cualquier sugerencia será apreciada.
Puedes usar un observador profundo para eso:
watch: { item: { handler(val){ // do stuff }, deep: true } } Esto ahora detectará cualquier cambio en los objetos en la matriz de item y las adiciones a la propia matriz (cuando se usa con Vue.set ). Aquí hay un JSFiddle: http://jsfiddle.net/je2rw3rs/
EDITAR
Si no desea observar todos los cambios en el objeto de nivel superior y solo desea una sintaxis menos incómoda para observar objetos anidados directamente, simplemente puede observar un computed en su lugar:
var vm = new Vue({ el: '#app', computed: { foo() { return this.item.foo; } }, watch: { foo() { console.log('Foo Changed!'); } }, data: { item: { foo: 'foo' } } })Aquí está el JSFiddle: http://jsfiddle.net/oa07r5fw/
Otro buen enfoque y que es un poco más elegante es el siguiente:
watch:{ 'item.someOtherProp': function (newVal, oldVal){ //to work with changes in someOtherProp }, 'item.prop': function(newVal, oldVal){ //to work with changes in prop } }(Aprendí este enfoque de @peerbolte en el comentario aquí )
Observación profunda de VueJs en objetos secundarios
new Vue({ el: "#myElement", data: { entity: { properties: [] } }, watch: { 'entity.properties': { handler: function (after, before) { // Changes detected. Do work... }, deep: true } } });