CODEWITHSUNDEEP
javascriptvue.jsvuejs2browser-historyhtml5-history
George Salukvadze
George Salukvadze

Reputation: 75

Vue.js survey using browser back/forward buttons

I'm using Vue.js to create a survey with multiple pages. Everything works, except I need to make browser back/forward buttons to do the same as Previous/Next buttons on the page.

I have googled multiple times, but I couldn't come up with any solution for the moment...

I know that I could use vue-router, but I don't know how to adapt it.

How can I achieve this?

HTML

<!DOCTYPE html>
***head***

<body>
    <div id="app">
        <h1>{{ survey.title }}</h1>

        <div id="survey" v-for="(question, index) in survey.questions">

            <div v-show="index === questionIndex">
                <h3>{{ question.text }}</h3>
                <div v-if="questionIndex === 2">
                    <input type="text" v-model="userResponses[2]" placeholder="Please enter your location:"> 
                </div>
                <div v-else-if="questionIndex === 4">
                    <select v-model="question4" multiple>
                        <option v-for="response in question.responses"> {{ response.text }} </option></select>
                </div>
                <div v-else-if="questionIndex === 5">
                    <select v-model="question5" multiple>
                        <option v-for="response in question.responses"> {{ response.text }} </option></select>
                </div>
                <div v-else>
                    <ol>
                        <li v-for="response in question.responses">
                            <label>
                                <input type="radio" v-bind:value="response" 
                                                    v-bind:name="index" 
                                                    v-model="userResponses[index]"> {{ response.text }}
                            </label>
                        </li>
                    </ol>
                </div>
                <div id="container">
                    <button id="left" v-if="questionIndex > 0" v-on:click="prev">Previous</button>
                    <button id="right" v-on:click="next">Next</button>
                </div>
            </div>
        </div>
        <div v-show="questionIndex === survey.questions.length">
            <h2>Thank you for taking our survey!</h2>
            <p>{{ userResponses }}</p>
            <p>{{ question4 }}</p>
            <p>{{ question5 }}</p>
        </div>
    </div>

    <footer>&copy; 2018 George Salukvadze for ***</footer>
</body>
</html>

Vue.js

window.onload = survey;
function survey(){
 var survey = {
    title: 'Welcome to online survey for Liquid!',
    questions: [
        {
            text: "What is your age group?",
            responses: [
                {text: '15-24'}, 
                {text: '25-34'},
                {text: '35-44'},
            ]
        }, {
            text: "What is your gender?",
            responses: [
                {text: 'Male'}, 
                {text: 'Female'},
                {text: 'Do not identify'},
            ]
        }, {
            text: "Where do you live?",
            responses: [
                {text: 'Please enter your location'},
            ]
        }, {
            text: "Do you like to shop?",
            responses: [
                {text: 'Yes'},
                {text: 'No'},
            ]
        }, {
            text: "Select your favorite things to buy:",
            responses: [
                {text: 'Clothing'},
                {text: 'Lingerie'},
                {text: 'Shoes'},
                {text: 'Devices'},
                {text: 'Cars'},
            ]
        }, {
            text: "Please select your favorite brands:",
            responses: [
                {text: 'Sandro'},
                {text: 'Maje'},
                {text: 'Sony'},
                {text: 'Ferrari'},
                {text: 'BMW'},
                {text: 'Asus'},
            ]
        }
    ]
 };

 new Vue({
     el: '#app',
     data: { 
         survey: survey,
         questionIndex: 0,
         userResponses: Array(survey.questions.length),
         question4: Array(5),
         question5: Array(9),
     }, 
     methods: {
         next: function() {
             this.questionIndex++;
         },
         prev: function() {
             this.questionIndex--;
         }
     }
 });
}

Upvotes: 3

Views: 3414

Answers (1)

acdcjunior
acdcjunior

Reputation: 135772

You could use the vue-router as you implied. The simplest solution for your example, though, is to just use the browser's history API. Steps:

  • When moving to previous/next questions, use history.pushState to add a state to the browser's history:

     methods: {
     next: function() {
         this.questionIndex++;
         this.updateHistory();  // added this line
     },
     prev: function() {
         this.questionIndex--;
         this.updateHistory();  // added this line
     },
     updateHistory: function() {  // added this method
         history.pushState({questionIndex: this.questionIndex}, "Question " + this.questionIndex);
     }
 }

  • And now all you have to do is listen to those history state changes. A good spot to hook a listener to this event is the mounted:

     mounted: function() {
     var vm = this;
     window.addEventListener('popstate', function(event) {
         vm.questionIndex = (event.state || {questionIndex: 0}).questionIndex;
     });
 },

And that's it.

Click here for the a demo page at JSBin (check the history button).

You'll find the source for that demo here.

Upvotes: 4

Related Questions