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

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（或其中的某些内容）。