时间戳

首页 > 解决方案 > Vuetify v-dialog 未显示，没有错误

javascript - Vuetify v-dialog 未显示，没有错误

问题描述

我正在尝试使用 Vuetify 为我的 Vue.js 前端实现一个简单的对话框。v-dialog 组件无法正常工作，当 v-model="dialog" 设置为 true 时，屏幕会变暗，但里面的对话框没有显示，您可以在此处查看：https://imgur。 com/K977VoS

代码只是从这里复制而来：https ://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/examples/dialogs/usage.vue仅添加到模板中。

这是一个以 Vue.js 作为前端的 Laravel 项目，带有 vuetify。我已经实现了功能齐全的 vuetify 日历，一切都很好，但是这个。我想添加一个带有对话框的新事件并获得相同的较暗页面。

我的 vuetify.js 配置：

import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)
import "vuetify/dist/vuetify.min.css";
import cs from 'vuetify/es5/locale/cs'
// import 'material-design-icons-iconfont/dist/material-design-icons.css'

const opts = { lang: {
    locales: { cs },
    current: 'cs',
    iconfont: 'mdi'
  },}

export default new Vuetify(opts)

我的 app.js 主文件：

require("./bootstrap");
window.Vue = require("vue");

import Vuetify from "../plugins/vuetify";

//...

const app = new Vue({
    store: store,
    el: "#app",
    vuetify: Vuetify
});

标签： javascriptvue.jsvuetify.js

解决方案

我遇到了和你一样的问题，但我的问题是因为我设置了v-dialog v-model='true'：

v-model 的值可以从一开始就设置为 true。当在 Vue 中全局注册严格用于 Dialog 的组件时，这很有帮助。当调用组件激活注册的对话框组件时，我希望对话框的 v-model 从一开始就为真。

资源

我不知道这是否有帮助，但它解决了我的问题。</p>

推荐阅读