Vuetify V-switch non si attiva visivamente

Question

Sto usando il componente v-swich in uno dei miei componenti figlio. Il componente stesso viene visualizzato alla vista ma quando ci clicco sopra, toogle non cambia visivamente lo stato.

Ho seguito questo tutorial per importare manualmente v-switch nel componente figlio https://vuetifyjs.com/en/customization/a-la-carte/#manually-importing

Componente figlio

<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)
});

Allora cosa mi manca qui?

Answer 1

Vuetify ha bisogno del suo wrapper v-appper funzionare correttamente.

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

Aggiungilo come componente radice della tua app.