javascript - Vue.js 无法使用语义 UI 下拉菜单

Question

所以我喜欢语义 UI，我刚开始使用 Vue.js

语义 UI 下拉菜单必须使用 semantic.js 中的 dropdown() 进行初始化，它会生成一个复杂的基于 div 的 HTML 以漂亮的方式显示下拉菜单。

当我将 Vue 绑定(bind)到下拉列表时，问题就来了，它不会根据模型更新 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

您在没有 key attribute 的 option 元素上使用了 v-for 指令.如果没有这个 key，Vue 会使用“就地补丁”策略来优化渲染。就 select 元素的更改而言，这很可能会扰乱您的语义 UI 下拉列表的预期。

将 key 属性添加到您的 option 标签，提供一个唯一的 id 作为值:

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

---

要在进行更改时清除模型的选择元素中的值，您可以使用 $('#vehicle-models').dropdown('restore defaults')。

此外，如果将所有逻辑放在一个 Vue 实例中，事情就会变得简单得多:Here's an example codepen.