javascript - versiones - ¿Puedes forzar a Vue.js a recargar/re-renderizar?

vue.js tutorial español

Question

Solo una pregunta rápida.

¿Puedes obligar a Vue.js a recargar / recalcular todo? ¿Si es así, cómo?

Answer 1

¿Por qué?

... ¿ necesitas forzar una actualización?

Quizás no esté explorando Vue en su mejor momento:

Para que Vue reaccione automáticamente a los cambios de valor, los objetos deben declararse inicialmente en los data . O, si no, deben agregarse usando Vue.set() .

Vea los comentarios en la demostración a continuación. O abra la misma demostración en un JSFiddle aquí .

new Vue({
  el: ''#app'',
  data: {
    person: {
      name: ''Edson''
    }
  },
  methods: {
    changeName() {
      // because name is declared in data, whenever it
      // changes, Vue automatically updates
      this.person.name = ''Arantes'';
    },
    changeNickname() {
      // because nickname is NOT declared in data, when it
      // changes, Vue will NOT automatically update
      this.person.nickname = ''Pele'';
      // although if anything else updates, this change will be seen
    },
    changeNicknameProperly() {
      // when some property is NOT INITIALLY declared in data, the correct way
      // to add it is using Vue.set or this.$set
      Vue.set(this.person, ''address'', ''123th avenue.'');
      
      // subsequent changes can be done directly now and it will auto update
      this.person.address = ''345th avenue.'';
    }
  }
})

/* CSS just for the demo, it is not necessary at all! */
span:nth-of-type(1),button:nth-of-type(1) { color: blue; }
span:nth-of-type(2),button:nth-of-type(2) { color: red; }
span:nth-of-type(3),button:nth-of-type(3) { color: green; }
span { font-family: monospace }

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <span>person.name: {{ person.name }}</span><br>
  <span>person.nickname: {{ person.nickname }}</span><br>
  <span>person.address: {{ person.address }}</span><br>
  <br>
  <button @click="changeName">this.person.name = ''Arantes''; (will auto update because `name` was in `data`)</button><br>
  <button @click="changeNickname">this.person.nickname = ''Pele''; (will NOT auto update because `nickname` was not in `data`)</button><br>
  <button @click="changeNicknameProperly">Vue.set(this.person, ''address'', ''99th st.''); (WILL auto update even though `address` was not in `data`)</button>
  <br>
  <br>
  For more info, read the comments in the code. Or check the docs on <b>Reactivity</b> (link below).
</div>

Para dominar esta parte de Vue, consulte los documentos oficiales sobre reactividad : advertencias de detección de cambios . ¡Esta es una lectura obligatoria!

Answer 2

: key = "$ route.params.param1" simplemente use key con sus parámetros para sus hijos de recarga automática.

Answer 3

Claro ... simplemente puede usar el atributo clave para forzar el renderizado (recreación) en cualquier momento.

<mycomponent :key="somevalueunderyourcontrol"></mycomponent>

Consulte https://jsfiddle.net/mgoetzke/epqy1xgf/ para ver un ejemplo.

También se discutió aquí: https://github.com/vuejs/Discussion/issues/356#issuecomment-336060875

Answer 4

Encontre un camino. Es un poco hacky pero funciona.

vm.$set("x",0);
vm.$delete("x");

Donde vm es su objeto de modelo de vista, y x es una variable inexistente.

Vue.js se quejará de esto en el registro de la consola, pero desencadena una actualización para todos los datos. Probado con la versión 1.0.26.

Answer 5

Esto me ha funcionado.

created() {
            EventBus.$on(''refresh-stores-list'', () => {
                this.$forceUpdate();
            });
        },

El otro componente dispara el evento refresh-stores-list hará que el componente actual se vuelva a procesar

Answer 6

Esto parece una solución bastante limpia de matthiasg en github.com/vuejs/Discussion/issues/356 :

también puede usar :key="someVariableUnderYourControl" y cambiar la clave cuando desee que el componente se reconstruya por completo

Para mi caso de uso, estaba alimentando un getter Vuex en un componente como accesorio. De alguna manera, Vuex obtendría los datos, pero la reactividad no se activaría de manera confiable para volver a generar el componente. En mi caso, establecer la key del componente en algún atributo en el accesorio garantizaba una actualización cuando los captadores (y el atributo) finalmente se resolvieron.

Answer 7

Intente usar this.$router.go(0); para recargar manualmente la página actual.

Answer 8

Para recargar / volver a renderizar / actualizar el componente, detenga las codificaciones largas. Hay una forma Vue.JS de hacer eso.

Solo usa :key atributo :key .

Por ejemplo:

<my-component :key="unique" />

Estoy usando ese en BS Vue Table Slot. Decir que haré algo por este componente, así que hágalo único.

Answer 9

Por favor lea esto http://michaelnthiessen.com/force-re-render/

La forma horrible: recargar toda la página
La forma terrible: usar el hack v-if
La mejor manera: usando el método de actualización de fuerza incorporado de Vue
La mejor manera: cambio de clave en su componente

<template>
   <component-to-re-render :key="componentKey" />
</template>

<script>
 export default {
  data() {
    return {
      componentKey: 0,
    };
  },
  methods: {
    forceRerender() {
      this.componentKey += 1;  
    }
  }
 }
</script>

También uso watch: en algunas situaciones.

Answer 10

Prueba este hechizo mágico:

vm.$forceUpdate();

No es necesario crear ningún vars colgante :)

Actualización: encontré esta solución cuando solo comencé a trabajar con VueJS. Sin embargo, una mayor exploración demostró este enfoque como una muleta. Por lo que recuerdo, en un momento me libré de él simplemente poniendo todas las propiedades que no se actualizaron automáticamente (en su mayoría anidadas) en propiedades calculadas.

Más información aquí: https://vuejs.org/v2/guide/computed.html

Answer 11

Trabajó para mi

    data () {
        return {
            userInfo: null,
            offers: null
        }
    },

    watch: {
        ''$route''() {
            this.userInfo = null
            this.offers = null
            this.loadUserInfo()
            this.getUserOffers()
        }
    }

Answer 12

Tuve este problema con una galería de imágenes que quería volver a mostrar debido a los cambios realizados en una pestaña diferente. Entonces tab1 = imageGallery, tab2 = favoriteImages

tab @ change = "updateGallery ()" -> esto obliga a mi directiva v-for a procesar la función filterImages cada vez que cambio de pestaña.

<script> export default { data() { return { currentTab: 0, tab: null, colorFilter: "", colors: ["None", "Beige", "Black"], items: ["Image Gallery", "Favorite Images"] }; }, methods: { filteredImages: function() { return this.$store.getters.getImageDatabase.filter(img => { if (img.color.match(this.colorFilter)) return true; }); }, updateGallery: async function() { // instance is responsive to changes // change is made and forces filteredImages to do its thing // async await forces the browser to slow down and allows changes to take effect await this.$nextTick(function() { this.colorFilter = "Black"; }); await this.$nextTick(function() { // Doesnt hurt to zero out filters on change this.colorFilter = ""; }); } } }; </script>

Answer 13

Use vm.$set(''varName'', value) . Busque detalles en Change_Detection_Caveats .

Answer 14

usando la directiva v-if

<div v-if="trulyvalue">
    <component-here />
 </div>

Entonces, simplemente cambiando el valor del valor verdadero de falso a verdadero hará que el componente entre el div se vuelva a procesar