[NcCheckboxRadioSwitch] type="switch" renders incorrectly
In [twofactor_email](https://github.com/datenschutz-individuell/twofactor_email) v3 in [PersonalSettings.vue](https://github.com/datenschutz-individuell/twofactor_email/blob/main/src/components/PersonalSettings.vue) I have this code:
``` vue
<template>
<div id="twofactor_email-personal_settings">
<div v-if="store.hasEmail">
<p>
<NcCheckboxRadioSwitch v-model="store.enabled"
type="switch"
:loading="loading"
@update:model-value="onUpdate">
Use two-factor authentication via e-mail
</NcCheckboxRadioSwitch>
</p>
…
```
Using recent versions, it renders to this in NC 32.0.5 and 33.0.0-rc1:

The HTML code producing this is …
``` html
<span data-v-6808cde4="" data-v-5f044aba=""
class="checkbox-radio-switch checkbox-radio-switch-switch checkbox-radio-switch--checked"
style="--1d6eb36d: 36px; --698a3993: 16px;">
<input data-v-6808cde4="" id="checkbox-radio-switch-nc-vue-0" aria-labelledby="nc-vue-1"
class="checkbox-radio-switch__input"
type="checkbox"
checked="">
<span data-v-a060196e="" data-v-6808cde4=""
class="checkbox-content checkbox-content-switch checkbox-content--has-text checkbox-radio-switch__content"
id="checkbox-radio-switch-nc-vue-0-label">
<span data-v-a060196e=""
class="checkbox-content__icon checkbox-content__icon--checked checkbox-radio-switch__icon"
aria-hidden="true"
inert="">
<span data-v-aaedb1c3="" data-v-a060196e="" aria-hidden="true"
class="icon-vue icon-vue--inline _iconToggleSwitch_WgcOx"
role="img"
style="--fb515064: 36px; --6bd152af: var(--color-primary-element); --16fd8ca9: calc(17 / 24 * 100%);">
<span data-v-aaedb1c3="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 12">
<path d="M17,1H7A5,5 0 0,0 2,6 5,5 0 0,0 7,11H17A5,5 0 0,0 22,6 5,5 0 0,0 17,1Z"></path>
<circle cy="6" r="3" fill="var(--color-main-background)"></circle>
</svg>
</span>
</span>
</span>
<span data-v-a060196e=""
class="checkbox-content__wrapper">
<span data-v-a060196e="" id="nc-vue-1"
class="checkbox-content__text checkbox-radio-switch__text">
Use two-factor authentication via e-mail
</span>
<!---->
</span>
</span>
</span>
```
… which is weird. I'd expect just a switch. This only happened after I migrated my app to vue3. Is that an issue in my code or in the vue component?
关闭于 2026-01-26 8 条评论