Как пробросить класс компонента?

Question

[Алексей]

<template>
    <div class="autocomplite_component">
        <div class="controller">

        <input type="text" class="textarea" @input="onInput" :value="value" :placeholder="placeholder">
        </div>
        <br>
        <label class="label" :class="error_label">{{ label }}</label>
        <div class="variants" v-if="filtered && showVariants" style="max-height: 50px; overflow: auto;">
            <div v-for="v in filtered" :key="v[variantKey]" class="variant" @click="selectVariant(v)">
              <span style="cursor: pointer;">{{ v[variantTitle] }}</span>  
            </div>
        </div>
       
    </div>
</template>

export default {
    name: 'AutocompleteInput',
    props: {
        variants: {
            type: Array,
            required: true,
        },
        value: {
            default: ''
        },
        label: {
            type: String,
            default: '',
        },
        variantKey: {
            type: String,
            default: 'id'
        },
        variantTitle: {
            type: String,
            default: 'id'
        },
        placeholder: {
            type: String,
            default: ''
        },
        needFull: {
            type: Boolean,
            default: false
        },
        error_label: {
            type: String,
            default: ''
        }
    },

Использование компонента

<autocomplete-input
              :variants="cargo_codes"
              :variantKey="'id'"
              :label="'Код груза'"
              :variantTitle="'code6'"
              v-model="all_information.cargo_code"
              :class="{ 'error_label': this.telegram_error.cargo_code }"
            ></autocomplete-input>

Не выходит передать класс error_label

Answer 1

[Виктор Майоров]

Вы не можете использовать зарезервированные имена для передачи данных в props.

<autocomplete-input
              :variants="cargo_codes"
              :variantKey="'id'"
              :label="'Код груза'"
              :variantTitle="'code6'"
              v-model="all_information.cargo_code"
--              :class="{ 'error_label': this.telegram_error.cargo_code }"
++             :myClass="{ 'error_label': this.telegram_error.cargo_code }"
            ></autocomplete-input>

export default {
    name: 'AutocompleteInput',
    props: {
        variants: {
            type: Array,
            required: true,
        },
        value: {
            default: ''
        },
        label: {
            type: String,
            default: '',
        },
        variantKey: {
            type: String,
            default: 'id'
        },
        variantTitle: {
            type: String,
            default: 'id'
        },
        placeholder: {
            type: String,
            default: ''
        },
        needFull: {
            type: Boolean,
            default: false
        },
--        error_label: {
--           type: String,
--           default: ''
--       }
++        myClass: {
++          type: String,
++         default: {},
++       }
    },

<template>
    <div class="autocomplite_component">
        <div class="controller">

        <input type="text" class="textarea" @input="onInput" :value="value" :placeholder="placeholder">
        </div>
        <br>
--        <label class="label" :class="error_label">{{ label }}</label>
++        <label class="label" :class="myClass">{{ label }}</label>
        <div class="variants" v-if="filtered && showVariants" style="max-height: 50px; overflow: auto;">
            <div v-for="v in filtered" :key="v[variantKey]" class="variant" @click="selectVariant(v)">
              <span style="cursor: pointer;">{{ v[variantTitle] }}</span>  
            </div>
        </div>
       
    </div>
</template>

Comments

[Алексей]

Спасибо!