CODEWITHSUNDEEP
vue.jsreactive
Sujan Shrestha
Sujan Shrestha

Reputation: 1040

V-IF not reactive while rendering button

I have a button that is being used to handle back button. I want to render this button in child components only so i added a V-IF condition.

<q-btn
    flat
    dense
    round
    v-go-back.single = true
    v-if="currentRoute"
    icon="arrow_back"
    class="q-mx-md menu-icon"
/>

<script>
export default {
  name: 'HeaderComponent',
  data () {
    return {
      route: this.$router.currentRoute.path
    }
  },
  computed: {
    currentRoute () {
      return this.route !== '/'
    }
  },
</script>

In home page, the button is not seen. But when i change the route to child component, button is still not seen. When i reload the page in child component button is seen. And when i navigate back to home page , button is still seen. Basically, the V-IF condition is not reactive. How can i make this reactive.

Any help is very much appreciated.

Regards

Upvotes: 0

Views: 227

Answers (1)

Shahadat Hossain
Shahadat Hossain

Reputation: 979

I faced a similar issue. I can't explain why is that but understand that data route not deeply watched so route not updating with $router change.

How I solve it. I called a $route watch function like this

<script>
export default {
  name: 'HeaderComponent',
  data () {
    return {
      route: this.$router.currentRoute.path
    }
  },
 watch: {
   // call again if the route changes
   '$route': function(to, from) {
           this.route = to.path
       }
   },
  computed: {
    currentRoute () {
      return this.route !== '/'
     }
   },
</script>

I think this will help you.

Upvotes: 1

Related Questions