Vue.js does not work with a semantic interface drop-down list

Question

So, I love Semantic UI, and I just started working with Vue.js

Semantic UI drop-down lists need to be initialized with dropdown () in semantic.js, it generates complex div-based HTML to show drop-down lists in a beautiful way.

The problem occurs when I bind Vue to a drop-down list, it does not update the user interface in accordance with the model. Especially when I change the value of the parent drop-down list.

For some reason, the bidning method works great when you first select an item from the parent drop-down list, but not after that: |

<div class="ui grid">
        <div class="row">
            <div class="column">
                <div class="ui label">Vechicle Make</div>
                <select class="ui dropdown" v-model="selected" id="vehicle-makes" v-on:change="onChange">
                    <option v-for="option in options" v-bind:value="option.id">
                        {{option.text}}
                    </option>
                </select>
            </div>
        </div>
        <div class="row">
            <div class="column">
                <div class="ui label">Vechicle Model</div>
                <select class="ui dropdown" v-model="selected" id="vehicle-models">
                    <option v-for="option in options" v-bind:value="option.id">
                    {{option.text}}
                    </option>
                </select>
            </div>
        </div>
    </div>

var model_options = {
  1: [{ text: "Accord", id: 1 }, { text: "Civic", id: 2 }],
  2: [{ text: "Corolla", id: 3 }, { text: "Hi Ace", id: 4 }],
  3: [{ text: "Altima", id: 5 }, { text: "Zuke", id: 6 }],
  4: [{ text: "Alto", id: 7 }, { text: "Swift", id: 8 }]
};

var makes_options = [
  { text: "Honda", id: 1 },
  { text: "Toyota", id: 2 },
  { text: "Nissan", id: 3 },
  { text: "Suzuki", id: 4 }
];

var vm_makes = new Vue({
  el: "#vehicle-makes",
  data: {
    selected: null,
    options: makes_options
  },
  methods: {
    onChange: function(event) {
      vm_models.selected = null;
      vm_models.options.splice(0);
      for (index = 0; index < model_options[this.selected].length; index++) {
        vm_models.options.push(model_options[this.selected][index]);
      }
    }
  }
});

var vm_models = new Vue({
  el: "#vehicle-models",
  data: {
    selected: null,
    options: []
  }
});

// Eveything works fine if I remove this...
$('.ui.dropdown').dropdown();

The exact code can be found here. https://codepen.io/adnanshussain/pen/KqVxXL?editors=1010

Answer 1

v-for option key. key, Vue " " . , , , select .

key option, :

<option v-for="option in options" :value="option.id" :key="option.id">
  {{ option.text }}
</option>

---

make, $('#vehicle-models').dropdown('restore defaults').

, Vue, : codepen.