VueJS複選框更新

我有點與VueJS狀態有線。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）顯示一個空數組。我必須將該調試放入更新的方法才能獲得正確的值。但如果我這樣做，我不能調用一種方法來改變數據或我會進入一個無限循環......

所以，我應該在哪裏調用我的filterMedia函數以便能夠從activeCategories訪問更新的值？

感謝您的幫助。

來源

2016-11-22 Gregory Loichot

嘗試onchange事件：

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

來源

2016-11-22 10:32:48

你是對的...謝謝！ –

VueJS複選框更新

回答

相關問題