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();
  }
});

这样它只会被应用一次。

vue js jquery切换器

1 个答案: