VueJS 컴포넌트 슬롯에 클래스를 추가하는 방법

VueJS 컴포넌트 슬롯에 클래스를 추가하는 방법

현재 어플리케이션을 리팩터링하여 모든 폼 요소를 다음 컴포넌트로 이동하고 있습니다.Control폼 컨트롤의 에러를 표시하는 등의 처리를 합니다.

나는 현재 이 파트를 가지고 있다.class="input" :class="{ 'is-danger' : errors['description'] }"각 컴포넌트마다 동일하지만 슬롯에는 속성이나 속성을 할당할 수 없습니다.따라서 아래 문제를 해결하고 반복을 중지하려면 어떻게 해야 할까요?:class몇 번이고?

통제.표시하다

<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>

언급URL : https://stackoverflow.com/questions/41183303/how-to-add-class-to-vuejs-component-slots