CODEWITHSUNDEEP
vue.jsvuetify.js
domaci_a_nas
domaci_a_nas

Reputation: 268

Inject property into Vuetify component inside a slot

my application has a "view" and "edit" mode, and in the "view" mode, I need to set all of the controls readonly.

I've created an InputWrapper component with a single slot, and my goal is to inject the readonly prop to the v-autocomplete component inside it. In the mounted lifecycle event of the InputWrapper I can access this.$slots.default[0].componentInstance.propsData, but when I set readonly property to "" (which is the value that appears when I set the prop of v-autocomplete directly), nothing happens. I also tried setting that in componentOptions. Is there any way to achieve this?

This is what I currently have:

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

Upvotes: 1

Views: 509

Answers (1)

domaci_a_nas
domaci_a_nas

Reputation: 268

In the end, I decided to extend VAutocomplete, and override isReadonly computed property. Since I have a special case where I need for a control to be enabled in the view mode as well, I set the default value for readonly property to null.

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

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

Upvotes: 1

Related Questions