Question

我正在使用付费模板，而我正在尝试将其应用于项目（它正在运行，但对眼睛不好）

这是代码

<input type="checkbox" name="checkbox_demo_mars" id="checkbox_demo_4" data-md-icheck checked />
<label for="checkbox_demo_4" class="inline-label">Outside vue</label>
<div id="vm_settings">
    <input type="checkbox" name="checkbox_demo_mars" id="checkbox_demo_4" data-md-icheck checked />
    <label for="checkbox_demo_4" class="inline-label">Inside VM</label>

    <template v-if="1">
        <input type="checkbox" name="checkbox_demo_mars" id="checkbox_demo_4" data-md-icheck checked />
        <label for="checkbox_demo_4" class="inline-label">Inside if</label>
    </template>

    <template v-for="setting in settings">
        <div>
            <input type="checkbox" name="checkbox_demo_mars" id="checkbox_demo_4" data-md-icheck checked />
            <label for="checkbox_demo_4" class="inline-label">Inside for</label>
        </div>
    </template>

    <button v-on:click="saveSettings">Save</button>
</div>

这是向浏览器checkbox not having the styles it should

输出的方式

有什么方法可以解决吗？

Answer 1

自定义复选框不仅仅使用CSS设置样式，而是代理它们：隐藏真实的复选框小部件，并在其位置插入和设置其他元素。

因此，必须有一些调用HTML的调用并替换小部件。您需要在插入的每个元素上发生这种情况。你可以写wrapper component来做到这一点。通常，在其mounted挂钩中，您可以将窗口小部件的初始化应用于this.$el（或其中的某些内容）。

使用v-for指令插入时，Vue不应用样式

1 个答案: