Блог

Главная - Вопросы по программированию - Внедрить свойство в компонент Vuetify внутри слота

Внедрить свойство в компонент Vuetify внутри слота

#vue.js #vuetify.js

Вопрос:

в моем приложении есть режим «просмотр» и «редактирование», и в режиме «просмотр» мне нужно установить все элементы управления только для чтения.

Я создал компонент InputWrapper с одним слотом, и моя цель состоит в том, чтобы ввести опору только для чтения в компонент v-автозаполнения внутри него. В событии смонтированного жизненного цикла InputWrapper , к которому я могу получить доступ this.$slots.default[0].componentInstance.propsData , но когда я устанавливаю свойство только для чтения на «» (это значение появляется, когда я устанавливаю опору v-автозаполнения напрямую), ничего не происходит. Я также попытался установить это в componentOptions. Есть ли какой-нибудь способ добиться этого?

Это то, что у меня сейчас есть:

 <template>
    <v-col :cols="cols" :class="{ 'input-wrapper': true, readonly: isReadOnly }">
        <slot></slot>
    </v-col>
</template>

<script>
    export default {
        name: 'InputWrapper',
        mounted() {
            if (this.isReadOnly) {
                this.$set(this.$slots.default[0].componentOptions.propsData, 'readonly', '');
            }
        },
        computed: {
            isReadOnly() {
                return this.readonly || this.$route.params.action === 'view';
            }
        },
        props: {
            readonly: {
                type: Boolean
            },
            cols: {
                type: Number
            }
        }
    };
</script>

Комментарии:

1. можем ли мы увидеть примеры кода? что это за компонент Vuetify?

2. Это v-автозаполнение, но оно также может быть применено к v-текстовому полю. Я добавил код

3. Похоже, он устанавливается только один раз. на горе. Не могли бы вы попробовать с часами и обновить этот.$, установленный только для чтения, со значением null или 'readonly' в зависимости от значения IsReadOnly.

4. Я пытался, но безуспешно. В конце концов, я решил расширить VAutocomplete и переопределить свойство IsReadOnly, вычисляемое

Ответ №1:

В конце концов, я решил расширить VAutocomplete и переопределить свойство IsReadOnly. Поскольку у меня есть особый случай, когда мне также нужно включить элемент управления в режиме просмотра, я установил значение по умолчанию для свойства только для чтения равным нулю.

 <script>
    import { VAutocomplete } from 'vuetify/lib';

    export default VAutocomplete.extend({
        name: 'auto-complete',
        computed: {
            isReadonly() {
                return 
                    this.readonly ||
                    (this.$route.params.mode == 'view' amp;amp; this.readonly !== false);
            }
        },
        props: {
            readonly: {
                type: Boolean,
                default: null
            }
        }
    });
</script>
Метки: