如何使用 vue 更新语义 ui 下拉列表？

Question

我正在尝试使用新值更新语义 ui 下拉菜单。 Vue 正在正确更新，我正在刷新语义 ui 下拉列表，但它仍然没有更新。我看到另一个post提到了key的使用，但还是失败了。

模板

<div id=root>
  <label>Type:</label>
  <select id="app_type" class="ui search selection dropdown" v-model="model_type_val">
    <option v-for="model_type in model_types" v-bind:value="model_type.value" v-bind:key="model_type.value">{{model_type.text}}</option>
  </select>
  <p>
    selected: {{model_type_val}}
  </p>
</div>

代码

var model_types2= [
  {value:"",text:"Type"},
  {value:"type1",text:"Type1a"},
  {value:"type2",text:"Type2a"},
  {value:"type3",text:"Type3a"},
  {value:"type4",text:"Type4"}      
];

var vm2= new Vue({
  el:'#root',
  data:{
    model_type_val:"",
    model_types:[
      {value:"",text:"Type"},
      {value:"type1",text:"Type1"},
      {value:"type2",text:"Type2"},
      {value:"type3",text:"Type3"}
    ]
  },
  mounted: function(){
    $('#app_type').dropdown();
    setTimeout(function() {
      this.model_types=model_types2;
      alert(this.model_types[1].text);
      $('#app_type').dropdown('refresh');              
    }, 1000);
  }
});

我尝试重现 this jsfiddle 中的代码。

Answer 1

您有 this 个问题。当您在使用 this 的 Vue 方法或生命周期挂钩中有回调时，您需要确保 this 指向正确的对象（Vue）。您可以使用箭头函数、闭包或 bind.

setTimeout(() => {
  this.model_types=model_types2;
  $('#app_type').dropdown('refresh');              
}, 1000);

这是你的fiddle updated。

注意：在 fiddle 中，我还将您的选择器转换为使用 ref。通常，您希望在使用 Vue 时开始戒掉 jQuery。

见How to access the correct this inside a callback。

如何使用 vue 更新语义 ui 下拉列表？

How do I update semantic ui dropdown list with vue?

semantic-ui

vue.js