如何使用 vue 更新语义 UI 下拉列表?

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

我试图在这个jsfiddle中重现代码。

Answer 1

你有一个this问题。当你在使用this的 Vue 方法或生命周期钩子中有一个回调时，你需要确保this指向正确的对象(Vue(。您可以使用箭头函数、闭包或bind来执行此操作。

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

这是你的小提琴更新。

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

请参阅如何在回调中访问正确的this。