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。您正在使用的 shorthand 是在您只需要 update 方法时使用的。

您可能只想在 bind 中执行类似的操作，因为插件似乎会检测元素是否被选中。

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

这样只会应用一次。

vue js jquery 切换器

vue js jquery switcher

javascript

jquery

vue.js