Vue.extend alters default class and icons

This issue has been created since 2022-09-10.

Version

2.7.0

Reproduction link

codesandbox.io

Steps to reproduce

Greetings everyone and congratulations for a great job. Getting inspired by this webpage (https://css-tricks.com/creating-vue-js-component-instances-programmatically), I tried to create and add custom components to one of my templates at runtime.
To sum up, I need to insert at runtime custom components which contain standard vue components (such as v-swith or v-radio-group for example).

Here is what I've done for one of my custom components, containing v-switches:
child .ts file:

export default class CheckboxComponent extends Vue {
    @Prop({required: false, type: Boolean, default: null})
    public defaultValue: boolean;

    @Prop({required: true, type: Number, default: 0})
    public id: number;

    @Prop({required: true, type: String, default: ""})
    public label: string;

    public yes: boolean = false;
    public no: boolean = false;

child .vue file:

<template>
    <v-row dense>
        <v-col cols="8">
            {{ label }}
        </v-col>

        <v-col cols="2">
            <v-switch
                v-model="yes"
                label="Yes"
                color="success"
            />
        </v-col>

        <v-col cols="2">
            <v-switch
                v-model="no"
                label="No"
                color="red"
            />
        </v-col>
    </v-row>
</template>

parent .ts file:

    let CheckboxClass = Vue.extend(CheckboxComponent);
    let checkbox = new CheckboxClass({
        propsData: { id: 1, value: null, label: "Some checkbox" }
    });

    checkbox.$mount();
    (this.$refs.container as HTMLElement).appendChild(checkbox.$el);
    checkbox.$on("change", this.onCheckboxValueChanged);

And that works perfectly fine: https://i.stack.imgur.com/mRhzS.png

But if I try to do the same with v-radio-groups instead, it goes like this:
child .ts file:

export default class RadioButtonComponent extends Vue {
    @Prop({required: false, type: String, default: null})
    public defaultValue: string;

    @Prop({required: true, type: Number, default: 0})
    public id: number;

    @Prop({required: true, type: String, default: ""})
    public label: string;

    @Prop({required: true, type: Array, default: () => []})
    public options: string[];

child .vue file:

<template>
    <v-row dense>
        <v-col cols="6">
            {{ label }}
        </v-col>

        <v-col cols="6">
            <v-radio-group
                v-model="value"
                mandatory
                row
            >
                <v-radio
                    v-for="(option, index) in options"
                    :key="index"
                    :label="option"
                    :value="option"
                />
            </v-radio-group>
        </v-col>
    </v-row>
</template>

parent .ts file:

    let RadioButtonClass = Vue.extend(RadioButtonComponent);
    let radioButton = new RadioButtonClass({
        propsData: { id: 2, defaultValue: "One", label: "Some radio button", options: ["One", "Two", "Three", "Four"] }
        });

    radioButton.$mount();
    (this.$refs.container as HTMLElement).appendChild(radioButton.$el);
    radioButton.$on("change", this.onRadioButtonValueChanged);

but it's then rendered this way: https://i.stack.imgur.com/LX8s2.png

What is expected?

I was expecting the v-radio-boxes to properly be displayed, just as v-switches are.

What is actually happening?

Let me explain what I found out, comparing that result to a "regular" added v-radio-group. It seems that all that's wrong comes from the v-input-selection styling:

<i aria-hidden="true" class="v-icon notranslate material-icons theme--light accent--text"\>$radioOn</i\>

As you can see $radioOn stands right in the slot, where it should be empty, plus the class that doesn't seem right as it should either be mdi mdi-radiobox-blank or mdi mdi-radiobox-marked whether the option is selected or not.

If I manually edit the style to the correct one, I'll then get https://i.stack.imgur.com/127ff.png

So, my question is:

  • is it a bug in Vue.extend that alters standard v-radio-group behaviour (I printed out in console and the created object radioButton already has the wrong values)

  • or is it designed to be this way, in order to let the developers customize their component, in which case I'm surely missing something.


I've also tried the same implementation with v-checkbox and gets the same result as with v-radio-group.

I tried to reproduce the development environment in CodeSandbox but didn't manage to get it compiled using Vue 3 :/

vivipure wrote this answer on 2022-09-13

Your Vue version in codesandbox is 3.2.39. Vue 3 does not support Vue.extend, you can use createApp .

More Details About Repo
Owner Name vuejs
Repo Name vue
Full Name vuejs/vue
Language TypeScript
Created Date 2013-07-29
Updated Date 2022-09-27
Star Count 199644
Watcher Count 6098
Fork Count 32848
Issue Count 587

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
`callIfIsObjptr` double read 0 2022-03-12 2022-09-10
Feature Request: Compare with file - md5.txt 0 2022-03-11 2022-09-04
🐛 [firebase_messaging-11.3.0] 'FSemantic Issue (Xcode): Property 'timeSensitiveSetting' not found on object of type 'UNNotificationSettings *'' 22 2022-05-11 2022-09-11
Rate limit feature request. Request throttler. 5 2022-01-29 2022-07-24
Use Parent method trait 3 2021-04-19 2022-08-20
[FEATURE REQUEST] Allow to dispatch jobs without tracking 6 2021-04-19 2022-08-20
Training on Large Graphs 3 2021-10-27 2022-09-14
React Native 0.63 can't use this component 6 2020-08-20 2022-08-06
Create an example with datasets that have different types of features 0 2021-04-25 2022-09-25
Building from Matlab 0 2021-07-25 2022-08-23
How to move set caret position in CodeArea 5 2021-05-19 2022-07-23
Pictograms & Microcharts 3 2022-04-17 2022-08-28
Import in auto.esm.js is wrong 2 2022-04-17 2022-09-14
[Bug] ActivityInterface adds a string index to any interface that implements it 5 2022-05-18 2022-08-21
Add multiple levels of violation to the style checker 0 2019-04-09 2022-09-13
A shim mode for targets without threading support 18 2021-05-18 2022-09-09
Terminology support 0 2021-02-22 2021-11-05
extra bottom space 9 2020-10-23 2022-01-21
PrepareFrameworkTasks is failing 0 2021-07-14 2022-09-26
When's the next binary release? 2 2021-08-11 2022-09-02
revscript outfit spell 3 2022-01-05 2022-07-28
Chart tooltip is not legible on QA satellite 0 2022-01-25 2022-09-11
[Bug] Infinite loading screen 2 2022-02-25 2022-09-03
[EXP-108-308] support yearn v3 0 2022-05-04 2022-09-17
Raw usage of entity 'id' field when doying an update operation 1 2021-07-10 2022-09-17
SampleApp not pausing for Authorisation 4 2022-01-01 2022-09-12
Feature request: performant matmul! example 2 2021-02-04 2022-09-22
Re-work on Overview pages 2 2021-08-23 2022-08-21
Add declaration-property-max-values 6 2021-08-06 2022-07-27
Stretch Mode Canvas Item not working 7 2022-01-24 2022-09-21
Failing io_uring tests 0 2022-06-20 2022-09-13
Update UserController.js 0 2019-06-26 2021-11-05
Generic error message when type alias is missing 'alias' 0 2019-11-25 2022-01-28
Ability to return a IAsyncOperation with a value 9 2021-10-08 2022-09-16
get Mat pixel data 2 2021-09-13 2022-01-13
error: ‘siginterrupt’ is deprecated: Use sigaction with SA_RESTART instead 1 2021-05-06 2022-09-26
HideExisting Must Be Correctly Handled does not handle passing the full object 4 2021-07-06 2022-09-08
Semicolon in the hostname is misinterpreted as a valid hostname on Firefox 3 2021-07-15 2022-09-15
Branches are not counted 3 2021-09-13 2022-08-23
CSS counters are not correctly rendered 8 2022-09-02 2022-09-14
Added user icon 0 2018-10-12 2022-01-11
Duplicated Environnement title in the Knowledge panels (logic error ?) 3 2022-04-11 2022-09-11
Country picker: overflow issue on iOS 2 2022-04-11 2022-09-25
iOS's camera permission prompt not translated 1 2022-04-11 2022-09-13
Black screen instead of camera feed when scanning 10 2022-04-11 2022-08-29
Quick fix: The app should warn if we attempt to switch to portion (and portion is not available) 0 2022-04-11 2022-09-22
[request]: Add global endpoint override to `aws_config::Config` 5 2022-01-11 2022-08-31
Investigate methods of reducing the on-disk size of Mentat databases 0 2018-08-22 2022-09-01
Mac电脑访问padavan后台非常慢 4 2021-08-26 2022-01-23
[video player]: Lack of support for error handling 4 2021-05-18 2022-09-11