CODEWITHSUNDEEP
vue.jsvuejs2
Jordan
Jordan

Reputation: 159

Navigating vuejs SPA via routes that share component does not refresh component data as expected

I have a couple routes in my vuejs SPA that I have set up using vue-router:

The component for each route is the same form with a bit of smarts to change form values based on the absence or present of the ID in the route (feedbackID, in my example).

I notice that when I click from the edit route to the create route, the data in my form does not clear.

Below is the gist of my route file

import FeedbackFormView    from './components/FeedbackForm.vue'

// Routes
const routes = [
    {
      path: '/create/feedback',
      component: FeedbackFormView,
      name: 'FeedbackCreate',
      meta: {
          description: 'Create Feedback',
      }
    },
    {
      path: '/edit/feedback/:feedbackId',
      component: FeedbackFormView,
      name: 'FeedbackEdit',
      meta: {
          description: 'Edit Feedback Form'
      },
      props: true
    }


   ]

export default routes

Below is the gist of my component

<template lang="html">
  <div>
      <form>
          <input v-model="model.someProperty">
      </form>
  </div>
</template>

<script>
export default {
    data() => ({model: {someProperty:''}}),
    props: ['feedbackId'],
    created() => {
        if (!this.$props['feedbackId']) {
          return;
        }

        // otherwise do ajax call and populate model
        // ... details omitted
    }
}
</script>

However, if I modify my component as follows, everything works as expected

<template lang="html">
  <div>
      <form>
          <input v-model="model.someProperty">
      </form>
  </div>
</template>

<script>
export default {
    data() => ({model: {someProperty:''}}),
    props: ['feedbackId'],
    created() => {
        if (!this.$props['feedbackId']) {
          return;
        }

        // otherwise do ajax call and populate model
        // ... details omitted
    },
    watch: {
      '$route' (to, from) {
        if (to.path === '/create/feedback') {
          this.model = {}
        }
      }
    }
}
</script>

Why is this? Why do I need watch?

I would have though that changing routes would be sufficient as the purpose of routing is to mimic the semantic behavior of page navigation

Upvotes: 0

Views: 655

Answers (2)

Jordan
Jordan

Reputation: 159

For those who come this later, the following answer addresses the issue I was facing:

Vue-Router: view returning to login page after page refresh

Upvotes: 0

Srinivas Damam
Srinivas Damam

Reputation: 3045

You have same component for different routes, when you go to edit route from the create route component is already created and mounted so the state of the component doesn't clear up.

Your component can listen to route changes using $router provided by vue-router every time the route changes the watcher is called.

Upvotes: 2

Related Questions