vue js jquery 切换器

Question

我正在尝试绑定一个复选框数组，同时使用一个名为 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();
  }
});

这样只会应用一次。