Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vuetify v-switch not toggling visually

I'm using v-swich component in one of my child components. The component itself is rendered at view but when i click on it the toogle doesn't change the state visually.

I followed this Tutorial to import v-switch manually into child component https://vuetifyjs.com/en/customization/a-la-carte/#manually-importing

Child Component

<template>
    <v-switch v-model="switch1" :label="`Switch 1: ${switch1.toString()}`"></v-switch>
</template>


<script>
import { VSwitch } from 'vuetify/lib'

export default {
    name: 'Configurator',
    components: {
        VSwitch
    },
    props: ['product', 'variants'],
    data()
    {
        return {
            switch1: true
        }
    }
}
</script>

Main.js

import Vue from 'vue';
import ConfiguratorApp from './components/Configurator.App';

let vm = new Vue({
    el: '#configurator-app',
    render: h => h(ConfiguratorApp)
});

So what i'm missing here?

like image 411
magic.77 Avatar asked Oct 18 '25 00:10

magic.77


1 Answers

Vuetify needs its wrapper v-app in order to function properly.

<template>
  <v-app>
      <v-switch v-model="switch1" :label="`Switch 1: ${switch1.toString()}`"></v-switch>
  </v-app>
</template>

Just add that as your app's root component.

like image 158
Thibaut Maurice Avatar answered Oct 19 '25 14:10

Thibaut Maurice



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!