Question

我正在尝试使用新值更新语义ui下拉列表。 Vue正在更新，我正在刷新语义ui下拉列表，但它仍然没有更新。我看到另一个帖子提到了密钥的使用，但它仍然失败了。

模板

<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。

注意：在小提琴中，我还将您的选择器转换为使用ref。通常，您希望在使用Vue时开始断绝自己的jQuery。

请参阅How to access the correct this inside a callback。

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

1 个答案: