I am developing an application with Vue and Laravel. Laravel is controlling my routes and I'm not using the vue-router.

I am conditionally loading some ponents based on the state of an object in my parent ponents data.

I have this method in my parent ponent:

  activateListingForm: function() {
    this.listingFormActive = !this.listingFormActive;
  }

This method is triggered by a button that will change this.listingFormActive to true or false.

I then have this in the template of the ponent:

  <transition name="slide-fade">
    <create-listing-form v-if="listingFormActive"></create-listing-form>
    <listings-table v-else></listings-table>
  </transition>

A problem that I am having is that some users are clicking the browser back button expecting the last ponent to load. I'm wondering if there is a way to change the state based on the back button?

Thanks

I am developing an application with Vue and Laravel. Laravel is controlling my routes and I'm not using the vue-router.

I am conditionally loading some ponents based on the state of an object in my parent ponents data.

I have this method in my parent ponent:

  activateListingForm: function() {
    this.listingFormActive = !this.listingFormActive;
  }

This method is triggered by a button that will change this.listingFormActive to true or false.

I then have this in the template of the ponent:

  <transition name="slide-fade">
    <create-listing-form v-if="listingFormActive"></create-listing-form>
    <listings-table v-else></listings-table>
  </transition>

A problem that I am having is that some users are clicking the browser back button expecting the last ponent to load. I'm wondering if there is a way to change the state based on the back button?

Thanks

• javascript
• laravel
• vue.js

• I think this is what you'd want to use stackoverflow./questions/1462719/… – Derek Pollard Commented Apr 21, 2018 at 22:19

1 Answer 1

It's doable. My colleagues and I had to do something similar while working on this page.

For it to work,

• url is the source of truth of what the value of listingFormActive should be
• the state of listingFormActive should be stored in url everytime it changes.
• the initial state of listingFormActive should be retrieved from url

First, watch listingFormActive. Everytime the state change, perform pushState to store its state as a url query.

watch: {
    listingFormActive: {
        handler(v) {
            history.pushState({
                listingFormActive: v
            }, null, `${window.location.pathname}?listingFormActive=${v}`);
        }
    }
}

Add some utility method for getting url query

methods: {
    currentUrlQuery() {
        return window.location.search
            .replace("?", "")
            .split("&")
            .filter(v => v)
            .map(s => {
                s = s.replace("+", "%20");
                s = s.split("=").map(s => decodeURIComponent(s));
                return {
                    name: s[0],
                    value: s[1]
                };
            });
    },
    getListingFormActive() {
        return this.currentUrlQuery().filter(obj => obj.name === 'listingFormActive').value;
    }
}

the initial state of listingFormActive should be based on what you saved in the url

data() {
    return {
        listingFormActive: this.getListingFormActive() == 'true' ? true : false
    }
},