VueJSチェックボックスの更新

Question

私はVueJSの状態でちょっと有線です。

これは私のシンプルなアプリです：

new Vue({ 
    el: '#media-app', 
    data: { 
     activeTypes: [], 
     activeCategories: [], 
     medias: [] 
    }, 
    methods: { 
     getFilteredData: function() { 
      // some computing needed 
      // refresh vue 
      Vue.set(me, "medias", []); 
     }, 

     filterMedia: function() { 
      console.debug(this.activeCategories); 
      console.debug(this.activeTypes); 
      this.getFilteredData(); 
     } 
    } 
}); 

そして、いくつかのHTMLのもの：

<input type="checkbox" id="i1" value="i1" class="filter categories" v-model="activeCategories" v-on:click="filterMedia()"> 
<label for='i1'>My cat 1</label> 
</div> 
@{{ activeCategories }} 

私は、チェックボックスをチェックし、{{activeCategories}} @テンプレートが正しく表示 "I1" と。しかし、console.debug（this.activeCategories）は空の配列を表示します。私は正しい値を得るために、そのデバッグを更新されたメソッドに入れなければなりません。しかし、私がそれを行うと、私はデータを変更するメソッドを呼び出すことはできませんまたは無限ループに入るでしょう...

私はactiveCategoriesから更新された値にアクセスするために私のfilterMedia関数を呼び出す必要がありますか？

ありがとうございました。

Answer 1

onchangeイベント試してみてください：あなたは正しいです

<input type="checkbox" id="i1" value="i1" class="filter categories" 
     v-model="activeCategories" v-on:change="filterMedia()">