How do I change the html on the page using vue.js?

Question

I have a div that holds a lot of html. I need to entirely change the content of that div to another totally different set of html. I also have to accomplish all this with Vue.js and without refreshing the page.

I tried making the div on another page, but the problem is that the data gets lost, so I have to do it without the page changing.

<div id='questions'>
  <div class="card card-1">
    <div class="card-header">
      <strong> [[ topic ]] | </strong> [[ subTopic ]]
    </div>
    <div class="card-body">
      [[ question ]] <br />

      <button id='1' v-on:click='validateAnswer(option1,1)' v-bind:disabled = 'isDisabled' class="btn btn-primary btn-block">
        [[ option1 ]]
      </button>
      <button id='2' v-on:click='validateAnswer(option2,2)' v-bind:disabled = 'isDisabled' class="btn btn-primary btn-block">
        [[ option2 ]]
      </button>
      <button id='3' v-on:click='validateAnswer(option3,3)' v-bind:disabled = 'isDisabled' class="btn btn-primary btn-block">
        [[ option3 ]]
      </button>
      <button id='4' v-on:click='validateAnswer(option4,4)' v-bind:disabled = 'isDisabled' class="btn btn-primary btn-block">
        [[ option4 ]]
      </button>

    </div>
    <div class="card-footer">
      <small>Authored by [[author]] on [[date]]</small>
    </div>

  </div>
  <div class="footer-buttons">
    <button class='btn btn-success' id='Previous' v-on:click='previous' :disabled = 'previousDisabled'>Previous</button>
    <button class="btn btn-danger" id='endTest' v-on:click="endTest" >End Test</button>
    <button class='btn btn-success' id='Next' v-on:click="next">Next</button>
  </div>
</div>

I expect to be able to change the content of the div questions when I click on the button 'end test'.

Answer 1

You could add multiple sections and toggle between them.

For example your markup could be:

<div id='questions'>
  <div class="card card-1">
    <div class="card-header">
      <strong> [[ topic ]] | </strong> [[ subTopic ]]
    </div>

    <div v-show="sectionOne" class="card-body">
        foo questions
    </div>
    <div v-show="sectionTwo" class="card-body">
        bar questions
    </div>

    <div class="card-footer">
      <small>Authored by [[author]] on [[date]]</small>
    </div>

  </div>
  <div class="footer-buttons">
    <button class='btn btn-success' id='Previous' v-on:click='previous' :disabled = 'previousDisabled'>Previous</button>
    <button class="btn btn-danger" id='endTest' v-on:click="endTest" >End Test</button>
    <button class='btn btn-success' id='Next' v-on:click="next">Next</button>
  </div>
</div>

var app = new Vue({
  el: '#questions',
  data: {
    sectionOne: true,
    sectionTwo: false
  },
  methods: {
    nextButton: function () {
        this.sectionOne = false;
        this.sectionTwo = true;
    }
  }
})