javascript - script - vue.js tutorial pdf

Vue.js: cómo ver correctamente los datos anidados

Question

Estoy tratando de entender cómo observar adecuadamente alguna variación de utilería. Tengo un componente primario (archivos .vue) que recibe datos de una llamada ajax, coloca los datos dentro de un objeto y lo usa 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 objeto 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 ver la variación de propiedad de cualquier artículo 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 el prop cambie o myArray obtenga nuevos elementos o alguna variación dentro de los existentes. Cualquier sugerencia será apreciada.

Answer 1

¿Cómo si quieres ver una propiedad por un tiempo y luego dejar de verla?

¿O para mirar una propiedad de componente hijo de biblioteca?

Puede usar el "observador dinámico":

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

$watch Watch devuelve una función de desbloqueo que dejará de ver si se llama.

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

También puedes usar la opción deep :

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

Asegúrate de consultar los documentos

Answer 2

Mi problema con la respuesta aceptada de usar deep: true , es que cuando observo profundamente una matriz, no puedo identificar fácilmente qué elemento de la matriz contiene el cambio. La única solución clara que he encontrado es esta respuesta, que explica cómo hacer un componente para que pueda ver cada elemento de la matriz de forma individual.

Answer 3

No lo veo mencionado aquí, pero también es posible usar el patrón vue-property-decorator si está extendiendo su clase Vue .

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

export default class SomeClass extends Vue {
   ...

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

   ...
}

Answer 4

Otra forma de agregar que solía ''hackear'' esta solución era hacer esto: configuré un valor computed separado que simplemente devolvería el valor del objeto anidado.

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...
    }
}

Answer 5

Otro buen enfoque y uno 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í )

Answer 6

Puede usar un observador profundo para eso:

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

Esto detectará ahora cualquier cambio en los objetos en la matriz de item y adiciones a la matriz misma (cuando se usa con Vue.set ). Aquí hay un JSFiddle: http://jsfiddle.net/je2rw3rs/

EDITAR

Si no desea ver cada cambio en el objeto de nivel superior, y solo quiere una sintaxis menos incómoda para ver objetos anidados directamente, simplemente puede ver un computed :

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/

Answer 7

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