Vuetify v-switch ne bascule pas visuellement

Question

J'utilise le composant v-swich dans l'un de mes composants enfants. Le composant lui-même est rendu à la vue mais lorsque je clique dessus, le toogle ne change pas l'état visuellement.

J'ai suivi ce tutoriel pour importer manuellement v-switch dans le composant enfant https://vuetifyjs.com/en/customization/a-la-carte/#manually-importing

Composant enfant

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

Alors qu'est-ce qui me manque ici?

Answer 1

Vuetify a besoin de son wrapper v-apppour fonctionner correctement.

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

Ajoutez simplement cela en tant que composant racine de votre application.