Solo una pregunta rápida.

¿Puedes forzar Vue.jsa recargar / recalcular todo? ¿Si es así, cómo?

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 exploración más profunda demostró este enfoque como una muleta. Por lo que recuerdo, en un tiempo lo eliminé 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

Esto parece una solución bastante limpia de matthiasg en este tema :

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 el componente keyen algún atributo en el accesorio garantiza una actualización cuando los captadores (y el atributo) finalmente se resuelven.

¿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 endata . O, si no, deben agregarse usandoVue.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!

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

La forma horrible: recargar toda la página
La forma terrible: usar el truco v-if
La mejor manera: usar el método incorporado de Vue forceUpdate
La mejor manera: cambiar las claves 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.

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

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

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

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

junto con su uso this.$set(obj,'obj_key',value) y actualización uniqueKeypara cada actualización en el valor del objeto (obj) para cada actualizaciónthis.uniqueKey++

funcionó para mí de esta manera

Entonces hay dos formas de hacer esto,

1) Puede usar $forceUpdate()dentro de su manejador de métodos, es decir

<your-component @click="reRender()"></your-component>

<script>
export default {
   methods: {
     reRender(){
        this.$forceUpdate()
     }
   }
}
</script>

2) Puede :keyasignar un atributo a su componente e incremento cuando desee volver a procesar

<your-component :key="index" @click="reRender()"></your-component>

<script>
export default {
   data() {
     return {
        index: 1
     }
   },
   methods: {
     reRender(){
        this.index++
     }
   }
}
</script>

usando la directiva v-if

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

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

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

Solo usa el :keyatributo.

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.

Esto me ha funcionado.

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

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

Encontre un camino. Es un poco hacky pero funciona.

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

¿Dónde vmestá su objeto de modelo de vista yx 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.

Trabajó para mi

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

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

solo agrega este código:

this.$forceUpdate()

Buena suerte

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

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ñas.

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

lo siento chicos, excepto el método de recarga de página (parpadeo), ninguno de ellos funciona para mí (: la clave no funcionó).

y encontré este método en el antiguo foro vue.js que funciona para mí:

https://github.com/vuejs/Discussion/issues/356

<template>
    <div v-if="show">
       <button @click="rerender">re-render</button>
    </div>
</template>
<script>
    export default {
        data(){
            return {show:true}
        },
        methods:{
            rerender(){
                this.show = false
                this.$nextTick(() => {
                    this.show = true
                    console.log('re-render start')
                    this.$nextTick(() => {
                        console.log('re-render end')
                    })
                })
            }
        }
    }
</script>