CODEWITHSUNDEEP
vue.jsnuxt.js
Canonka
Canonka

Reputation: 333

How can i refresh only nuxt component in Nuxt?

i want refresh my component after add something. İ try

  refresh() {
    this.$nuxt.refresh()
  }

this but not working this is truelly

Upvotes: 2

Views: 7557

Answers (1)

Iman Shafiei
Iman Shafiei

Reputation: 1617

Here is my idea to refresh the component. Base on your issue, you can use some ways to achieve this goal. But in my opinion, there is a way that you can bind a key to your component, and by changing the key, your component will refresh.

I implement a simple example to show you how it works:

Vue.component('button-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: '<button @click="count++">You clicked me {{ count }} times.</button>'
})

new Vue({
  el: '#app',
  data: {
    component_key: 0
  },
  methods: {
    refreshComponent() {
      this.component_key += 1
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <button @click="refreshComponent()">
Refresh Compoenent
</button>
  <button-counter :key="component_key" />
</div>

You can click on the right button in the above example and see the count is going up. After that, when you click on the Refresh Component button, you see that the component refreshes.

Also, you can use this.$forceUpdate() to refresh all of your variables. Maybe it'll help with your situation, but I recommend the key binding solution for your issue.

Upvotes: 1

Related Questions