title: Vue.js survey using browser back/forward buttons
body: <p>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.</p>
  
  <p>I have googled multiple times, but I couldn't come up with any solution for the moment...</p>
  
  <p>I know that I could use vue-router, but I don't know how to adapt it.</p>
  
  <p>How can I achieve this?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  ***head***
  
  &lt;body&gt;
      &lt;div id="app"&gt;
          &lt;h1&gt;{{ survey.title }}&lt;/h1&gt;
  
          &lt;div id="survey" v-for="(question, index) in survey.questions"&gt;
  
              &lt;div v-show="index === questionIndex"&gt;
                  &lt;h3&gt;{{ question.text }}&lt;/h3&gt;
                  &lt;div v-if="questionIndex === 2"&gt;
                      &lt;input type="text" v-model="userResponses[2]" placeholder="Please enter your location:"&gt; 
                  &lt;/div&gt;
                  &lt;div v-else-if="questionIndex === 4"&gt;
                      &lt;select v-model="question4" multiple&gt;
                          &lt;option v-for="response in question.responses"&gt; {{ response.text }} &lt;/option&gt;&lt;/select&gt;
                  &lt;/div&gt;
                  &lt;div v-else-if="questionIndex === 5"&gt;
                      &lt;select v-model="question5" multiple&gt;
                          &lt;option v-for="response in question.responses"&gt; {{ response.text }} &lt;/option&gt;&lt;/select&gt;
                  &lt;/div&gt;
                  &lt;div v-else&gt;
                      &lt;ol&gt;
                          &lt;li v-for="response in question.responses"&gt;
                              &lt;label&gt;
                                  &lt;input type="radio" v-bind:value="response" 
                                                      v-bind:name="index" 
                                                      v-model="userResponses[index]"&gt; {{ response.text }}
                              &lt;/label&gt;
                          &lt;/li&gt;
                      &lt;/ol&gt;
                  &lt;/div&gt;
                  &lt;div id="container"&gt;
                      &lt;button id="left" v-if="questionIndex &gt; 0" v-on:click="prev"&gt;Previous&lt;/button&gt;
                      &lt;button id="right" v-on:click="next"&gt;Next&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div v-show="questionIndex === survey.questions.length"&gt;
              &lt;h2&gt;Thank you for taking our survey!&lt;/h2&gt;
              &lt;p&gt;{{ userResponses }}&lt;/p&gt;
              &lt;p&gt;{{ question4 }}&lt;/p&gt;
              &lt;p&gt;{{ question5 }}&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;footer&gt;&amp;copy; 2018 George Salukvadze for ***&lt;/footer&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Vue.js</strong></p>
  
  <pre><code>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--;
           }
       }
   });
  }
  </code></pre>