Vue.js无法使用Semantic UI下拉列表

Question

所以我喜欢Semantic UI,我刚开始使用Vue.js

必须使用semantic.js中的dropdown()初始化语义UI下拉,它会生成一个复杂的基于div的HTML,以非常方式显示下拉列表.

当我将Vue绑定到下拉列表时,问题就出现了,它不会根据模型更新UI.特别是当我更改父下拉列表的值时.

出于某种原因,首次在父下拉列表中选择项目时,出价工作正常,但在此之后不会:|

<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();

确切的代码可以在这里找到.https://codepen.io/adnanshussain/pen/KqVxXL?editors=1010

Answer 1

您v-for在option没有key属性的元素上使用指令.如果没有这个key,Vue使用"就地补丁"策略来优化渲染.对于select元素的更改,这很可能会弄乱您的语义UI下拉列表所期望的内容.

key在option标记中添加属性,提供唯一ID作为值:

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

要在make更改时清除模型的select元素中的值,您可以使用$('#vehicle-models').dropdown('restore defaults').

此外,如果您将所有逻辑放在一个Vue实例中,事情变得更加简单:这是一个示例代码集.