Vue.js not working with Semantic UI dropdown

Question

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

Semantic UI dropdowns must be initialized using the dropdown() in semantic.js, it generates a complex div based HTML to show the dropdowns in a pretty way.

The problem comes when I bind Vue to a dropdown, it doesn't update the UI according to the model. Especially when I change the value of the parent dropdown.

For some reason the bidning works fine the first time an item is selected on the parent dropdown, 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

You are using a v-for directive on your option element without a key attribute. Without this key, Vue uses an "in-place patch" strategy to optimize rendering. This is most likely messing with what your Semantic UI dropdown is expecting as far as changes to the select element go.

Add a key attribute to your option tag, providing a unique id as the value:

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

---

To clear the value in the model's select element when the make changes, you can use $('#vehicle-models').dropdown('restore defaults').

Also, if you put all the logic in one Vue instance, things become a lot simpler: Here's an example codepen.