web-dev-qa-db-fra.com

Comment puis-je recharger un composant vue?

Je sais que la solution est de mettre à jour les données de prop comme ceci:

this.selectedContinent = ""

Mais je veux utiliser une autre solution

Après avoir lu quelques références, la solution est:

this.$forceUpdate()

Je l'essaie, mais ça ne marche pas

Démo et code complet comme ceci: 

https://jsfiddle.net/Lgxrcc5p/13/

Vous pouvez cliquer sur le bouton Test pour l'essayer

J'ai besoin d'une solution autre que la mise à jour des données de propriété

vue.jsvuejs2vue-componentvuex
2
Success Man

J'utilise v-if pour rendre le composant:

<div id="app">
      <button type="button" @click="updateComponent">test</button>
      <test-el v-if="show"></test-el>
</div>

démo

3
Julien

Vous devez attribuer une clé à votre composant. Lorsque vous souhaitez re-rendre un composant, il vous suffit de mettre à jour la clé . Plus d'infos ici .

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

export default {
  data() {
    return {
      componentKey: 0,
    }
  },
  methods: {
    forceRerender() {
      this.componentKey += 1
    }
  }
}
0
Ilyich

Vous pouvez utiliser Object.assign pour affecter les propriétés de données initiales.

Au lieu de this.$forceUpdate()

Vous devriez utiliser Object.assign(this.$data,this.$options.data.call(this)).

Ici, nous utilisons ceci. $ Options.data obtenir les données originales et assignons ces valeurs à cette $.

Voir le violon mis à jour Link .

Mettre à jour:

Une autre méthode: Link

0
Shubham Patel

Je suis également confronté au même problème. J'ai utilisé location.reload() pour recharger le composant.
Ce n'est peut-être pas la bonne façon de résoudre ce problème. Mais cela a résolu mon problème.

0
Pulkit Aggarwal