如何解决Vuetify v-switch不可见切换
我在我的一个子组件中使用了v-swich组件。 组件本身是在视图中呈现的,但是当我单击它时,toogle不会 视觉上改变状态。
我按照本教程的说明将v-switch手动导入到子组件中 https://vuetifyjs.com/en/customization/a-la-carte/#manually-importing
子组件
<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)
});
那我在这里想念什么?
解决方法
Vuetify需要其包装v-app
才能正常运行。
<template>
<v-app>
<v-switch v-model="switch1" :label="`Switch 1: ${switch1.toString()}`"></v-switch>
</v-app>
</template>
只需将其添加为应用的根组件即可。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。