Vuetify v-switch tidak beralih secara visual

Question

Saya menggunakan komponen v-swich di salah satu komponen anak saya. Komponen itu sendiri ditampilkan pada tampilan tetapi ketika saya mengkliknya toogle tidak mengubah status secara visual.

Saya mengikuti Tutorial ini untuk mengimpor v-switch secara manual ke komponen anak https://vuetifyjs.com/en/customization/a-la-carte/#manually-importing

Komponen Anak

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

Jadi apa yang saya lewatkan di sini?

Answer 1

Vuetify membutuhkan pembungkusnya v-appagar berfungsi dengan baik.

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

Cukup tambahkan itu sebagai komponen root aplikasi Anda.