如何将类添加到VueJS组件插槽?

时间:2016-12-16 11:21:36

标签: components vuejs2

我目前正在重构一个应用程序,并将所有表单元素移动到一个名为Control的组件,该组件将处理显示表单控件错误之类的内容。

我目前剩下这部分class="input" :class="{ 'is-danger' : errors['description'] }",这对于每个组件都是相同的,但是插槽不能分配任何属性或属性,那么解决以下问题的方法是什么,并停止重复:class一遍又一遍?

control.vue

<template>
    <p class="control">
        <slot class="input" :class="{ 'error' : errors[model] }"></slot>

        <template v-if="errors[model]">
            <i class="fa fa-check"></i>
            <span class="help error">{{ errors[model][0] }}</span>
        </template>
    </p>
</template>

<script>
    export default {
        props: {
            model: String,
            errors: Object,
        }
    }
</script>

用法 - 当前

<control model="description" :errors="errors">
    <input class="input" :class="{ 'is-danger' : errors['description'] }" type="text" v-model="item.description">
</control>

用法 - 目标

<control model="description" :errors="errors">
    <input type="text" v-model="item.description">
</control>

0 个答案:

没有答案