how to change a selections options based on another select option selected by vue js

Question

I want to use this, and I had trouble making it in Vue Version. I have been read the documentary of Vue in Vuejs.org, but it doesn't help me to migration this script to vue version

Structure HTML

<select id="type">
    <option value="item1">item1</option>
    <option value="item2">item2</option>
    <option value="item3">item3</option>
</select>

<select id="size">
    <option value="">-- select one -- </option>
</select>

JS

$(document).ready(function() {

    $("#type").change(function() {
        var val = $(this).val();
        if (val == "item1") {
            $("#size").html("<option value='test'>item1: test 1</option><option value='test2'>item1: test 2</option>");
        } else if (val == "item2") {
            $("#size").html("<option value='test'>item2: test 1</option><option value='test2'>item2: test 2</option>");

        } else if (val == "item3") {
            $("#size").html("<option value='test'>item3: test 1</option><option value='test2'>item3: test 2</option>");

        }
    });


});

Answer 1

Here is an example of how to do: https://codepen.io/antoniandre/pen/OJJQMGN?editors=1010

JS

new Vue({
  el: '#app',
  data: () => ({
    selection1: null,
    optionsList: ''
  }),

  methods: {
    changeSelect2 () {
      switch (this.selection1) {
          case 'item1':
            this.optionsList = '<option value="test">item1: test 1</option><option value="test2">item1: test 2</option>'
            break;
          case 'item2':
            this.optionsList = '<option value="test">item2: test 1</option><option value="test2">item2: test 2</option>'
            break;
          case 'item3':
            this.optionsList = '<option value="test">item3: test 1</option><option value="test2">item3: test 2</option>'
            break;
      }
    }
  }
})

HTML

<div id="app">
  <select @change="changeSelect2" v-model="selection1">
      <option value="item1">item1</option>
      <option value="item2">item2</option>
      <option value="item3">item3</option>
  </select>

  <select v-html="optionsList"></select>
</div>

But this is certainly not the cleanest way to do it I just converted your example as is. To make it nicer, the options should be in a list probably.

---

Here is a little bit of tutorial to start and understand:

1. include Vue library
2. Never manipulate the DOM (unless no choice), Vue is DATA DRIVEN
3. listen for DOM events on DOM elements with @eventName
4. place your functions in methods , and your vars in data this is always like that
5. the v-model attribute is a 2 way binding and triggers the variable to change automatically when the select list selected option changes, this is called "reactivity".
6. place your variables in the html within v-html for HTML or mustaches {{ }} if you only want to keep its textual value and not HTML.
7. follow a few tutorials

Answer 2

I needed the answer of this question and I found this topic. So, I tried it and yes it worked. After that I wanted to try and improve the answer for 3 separate select boxes that linked each other. This is my answer:

<script src="vue.js"></script>

<form method="get">
<div id="app">
  <select @change="select1change" v-model="list1" name="select1">
      <option value="fruits">fruits</option>
      <option value="vegetables">vegetables</option>
      <option value="flowers">flowers</option>
  </select>

  <select @change="select2change" v-model="list2" v-html="select2options" name="select2"></select>

  <select v-html="select3options" name="list3"></select>
</div>
<input type="submit">
<form>

<script>
new Vue({
  el: '#app',
  data: () => ({
    list1: null,
    list2: null,
    select2options: '',
    select3options: ''
  }),

  methods: {
    select1change() {
      switch (this.list1) {
          case 'fruits':
            this.select2options = '<option value="apple">apple</option><option value="banana">banana</option>'
            break;
          case 'vegetables':
            this.select2options = '<option value="spinach">spinach</option><option value="broccoli">broccoli</option>'
            break;
          case 'flowers':
            this.select2options = '<option value="rose">rose</option><option value="daisy">daisy</option>'
            break;
      }
    },
    select2change() {
      switch (this.list2) {
          case 'apple':
            this.select3options = '<option value="red apple">red apple</option><option value="green apple">green apple</option>'
            break;
          case 'banana':
            this.select3options = '<option value="yellow">yellow</option><option value="green">green</option>'
            break;
          case 'spinach':
            this.select3options = '<option value="big leaf">big leaf</option><option value="tiny leaf">tiny leaf</option>'
            break;
          case 'broccoli':
            this.select3options = '<option value="whole broccoli">whole broccoli</option><option value="half broccoli">half broccoli</option>'
            break;
          case 'rose':
            this.select3options = '<option value="pink rose">pink rose</option><option value="red rose">red rose</option>'
            break;
          case 'daisy':
            this.select3options = '<option value="white daisy">white daisy</option><option value="yellow daisy">yellow daisy</option>'
            break;
      }
    }
  }
})
</script>