vue js jquery switcher

Question

我試圖綁定一個checkboxes數組，同時使用一個名爲switcher的jQuery插件（它也包含在Pixel Admin主題中）。 我的問題是它沒有初始化插件。

HTML

<div v-for="partnerType in partnerTypes" class="panel-body"> 
    {{ partnerType.name }} 
    <span class="pull-right"> 
     <input name="types[]" type="checkbox" 
      value="{{partnerType.id}}" 
      v-checkbox 
      v-model="checkedPartnerTypes" 
      v-on:change="updatePartnershipPartnerType(partnerType)"> 
    </span> 
</div> 

<script src="/javascripts/custom/directives/checkbox.js"></script> 
<script src="/javascripts/custom/companies/show.js"></script> 

checkbox.js

Vue.directive('checkbox', function(value) { 
    $(this.el).switcher({ 
     theme: 'modern', 
     on_state_content: '', 
     off_state_content: '' 
    }); 

    if(value) 
     $(this.el).addClass('checked'); 
    else 
     $(this.el).removeClass('checked'); 
}); 

在show.js文件，我基本上有一個checkedPartnerTypes: []陣列，這是我更新最初和每個請求之後。

Answer 1

您的指令永遠不會實際更新，因爲您沒有將值傳遞給v-checkbox。當你只需要update方法時，你正在使用的速記。

您可能只想在bind中這樣做，因爲插件似乎檢測是否選中該元素。

Vue.directive('checkbox', { 
    bind: function() { 
    $(this.el).switcher(); 
    } 
}); 

這樣它只會被應用一次。