How can I reload a vue component?

Question

I know the solution is update the prop data like this :

this.selectedContinent = ""

But I want to use another solution

After I read some reference, the solution is :

this.$forceUpdate()

I try it, but it does not work

Demo and full code like this :

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

You can click button test to try it

I need a solution other than update the property data

Capapie

Answer 1

You have to assign a key to your component. When you want to re-render a component, you just update the key. More info here.

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

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

Cremona

component methods stop working after this – Thallus

how to reload it from inside? – Eleonoreeleoptene

@Eleonoreeleoptene to reload from inside you can emit an event to parent component and tell it to do the reload – Cremona

Answer 2

I use v-if to render the component:

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

demo

Ruppert

this worked for me - I set data.show default false then set to true and the component is rendered. – Commendatory

Instead of v-if, use :key="componentKey" demo – Earpiercing

Answer 3

You can use Object.assign to assign initial data properties.

Instead of this.$forceUpdate()

You should use Object.assign(this.$data,this.$options.data.call(this)).

Here we using this.$options.data get original data and assigning this values to this.$data.

See the updated fiddle Link.

Update:

Another method: Link

Clipper

On the your fiddle itu works. But on my real case, it does not work. In my real case, I must refresh the page. Do you have another solution to update whole of component without refresh the page? – Capapie

I have added another method. – Clipper

It seems it can not be used in my real case. My real case like this : <template> ... </template> <script> export default{ props: [...], data() { return { ... }; }, computed:{ .... } }; </script>. It can not define a function – Capapie

You can add the initialState() function before export default it your script tag. – Clipper

I had add it. But, there are some errors. It looks like your second solution does not fit my real case – Capapie

It seems it does not work because in my real case, the data continent, country and city is called from computed: {...}. Seems it's the problem. Seems to have to update data on computed: {...}. But it seems that it can not be done – Capapie

Look at this : #46213529. I explain my real case with more detail – Capapie

Answer 4

I thought I needed to reload, but I was able to move everything inside the mounted hook to an init method. The mounted hook calls the init method, and if you need the parent to reload everything it can use a ref to call this.$refs.componentName.init();.

Gavrila

Answer 5

Simplest one

For your data in object use your key as JSON.stringify(data)

  <component :key="JSON.stringify(data)" :data="data" />

just update your state

$vm.data={
name:'balaji'
}

it automaticly update your component

Fabiolafabiolas

Answer 6

On vuejs3 :

<template>
  <render-component :key="count" />
  <span @click="renderComponent">Click to reload render-component</span>
</template>

<script>
import { ref } from 'vue'
export default {
   setup() {
    const count = ref(0)

    const renderComponent = () => {
     count.value++
    }
    return {
     count,
     renderComponent
    }
   }
}
</script>

see gist

Insufficient

Answer 7

I also face the same issue. I used location.reload() for reloading the component.
This may be not the right way to solve this problem. But this solved my problem.

Metallo