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

私は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を参照してください。