How to prompt second tab content while selecting 2nd option in dropdown

Question

Here i am trying to achieve a selection-based prompting tab content, If i will select template 2nd in select option. then if i will click on next then tab-content second should prompt, If i will select template 3rd in select option then if we click on next at that time tab-content 3rd must prompt. Please anyone can help me. I am struggling a lot to achieve this. please help me.

<div id="app">
    <form-wizard @on-complete="onComplete">
        <tab-content title="Personal details"
                     icon="ti-user">
          <select>
            <option>Template 2nd</option>
            <option>Template 3rd</option>
          </select>
        </tab-content>
        <tab-content title="Additional Info"
                     icon="ti-settings">
          My second tab content
        </tab-content>
        <tab-content title="Last step"
                     icon="ti-check">
          Yuhuuu! This seems pretty damn simple
        </tab-content>
    </form-wizard>
</div>

vue.js

<script>
Vue.use(VueFormWizard)
new Vue({
 el: '#app',
 methods: {
  onComplete: function(){
      alert('Yay. Done!');
   }
  }
})
</script>

Answer 1

You can use refs and can use the changeTab method of form-wizard to change the tab.

<select @change="go" id="select-option">
    <option value="" disabled selected hidden>Select...</option>
    <option value="1">Template 2nd</option>
    <option value="2">Template 3rd</option>
</select>

go() {
    let index = document.getElementById("select-option").value
    this.$refs.formWiz.changeTab(0, index)
}