如何解决：无法读取 Vuetify 和 Vue3 的未定义属性（读取“mdAndUp”）

Question

我正在使用 Vue3 和 Vuetify，在尝试访问时遇到了这个问题

$vuetify.breakpoint.mdAndUp

这是错误信息

Uncaught runtime errors:
Cannot read properties of undefined (reading 'mdAndUp')
TypeError: Cannot read properties of undefined (reading 'mdAndUp')
    at eval (webpack-internal:///./node_modules/webpack-plugin-vuetify/dist/scriptLoader.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/pages/login.vue?vue&type=template&id=f6957b98:92:100)
    at Proxy.renderFnWithContext (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:886:13)
    at Proxy.eval (webpack-internal:///./node_modules/vuetify/lib/components/VGrid/VRow.mjs:133:23)
    at renderComponentRoot (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:940:38)
    at ReactiveEffect.componentUpdateFn [as fn] (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5320:46)
    at ReactiveEffect.run (webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:217:19)
    at instance.update (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5433:16)
    at setupRenderEffect (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5443:5)
    at mountComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5237:7)
    at processComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5203:9)

我已经在 /plugins/vuetify.js 中设置了 Vuetify

// Styles
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'

import { createApp } from 'vue'
// Vuetify
import { createVuetify } from 'vuetify'

export default createVuetify({

})

并将此文件导入到 main.js 文件中：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify'
import { loadFonts } from './plugins/webfontloader'

loadFonts()

createApp(App)
  .use(router)
  .use(vuetify)
  .mount('#app')

我尝试在文件login.vue中使用

$vuetify.breakpoint.mdAndUp

。

<template>
    <v-container fluid>
      <v-row align="center" justify="center">
        <v-col cols="2" sm="1" md="6" lg="4">
          <!-- 左侧登录表单 -->
          <v-card elevation="3">
            <v-card-title class="text-center">
              <span class="headline">登录</span>
            </v-card-title>
            <v-card-text>
              <!-- 在这里放置你的登录表单 -->
              <!-- 例如： -->
              <v-form @submit.prevent="login">
                <v-text-field v-model="username" label="用户名" outlined></v-text-field>
                <v-text-field v-model="password" label="密码" type="password" outlined></v-text-field>
                <v-btn type="submit" color="primary" block>登录</v-btn>
              </v-form>
            </v-card-text>
          </v-card>
        </v-col>
        <v-col cols="12" sm="6" v-show="$vuetify.breakpoint.mdAndUp">
          <!-- 右侧图片 -->
          <v-img src="src/assets/login-cover.jpg" alt="Login Image" aspect-ratio="1.5"></v-img>
        </v-col>
      </v-row>
    </v-container>
  </template>
  
  <script>
  import Cookies from 'js-cookie'
  import debounce from 'lodash/debounce'
  import { getUUID } from '@/utils'
  export default {
    data () {
      return {
        captchaPath: '',
        dataForm: {
          username: 'admin',
          password: 'admin',
          uuid: '',
          captcha: ''
        }
      }
    },
    computed: {
      dataRule () {
        return {
          username: [
            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
          ],
          password: [
            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
          ],
          captcha: [
            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
          ]
        }
      }
    },
    created () {
      this.getCaptcha()
    },
    methods: {
      // 获取验证码
      getCaptcha () {
        this.dataForm.uuid = getUUID()
        this.captchaPath = `${window.SITE_CONFIG['apiURL']}/captcha?uuid=${this.dataForm.uuid}`
      },
      // 表单提交
      dataFormSubmitHandle: debounce(function () {
        this.$refs['dataForm'].validate((valid) => {
          if (!valid) {
            return false
          }
          this.$http.post('/login', this.dataForm).then(({ data: res }) => {
            if (res.code !== 0) {
              this.getCaptcha()
              return this.$message.error(res.msg)
            }
            Cookies.set('token', res.data.token)
            this.$router.replace({ name: 'home' })
          }).catch(() => {})
        })
      }, 1000, { 'leading': true, 'trailing': false })
    }
  }
  </script>

我的依赖项是：

"dependencies": {
    "@mdi/font": "5.9.55",
    "axios": "^1.6.8",
    "core-js": "^3.8.3",
    "js-cookie": "^3.0.5",
    "roboto-fontface": "*",
    "vue": "^3.2.13",
    "vue-i18n": "^9.10.2",
    "vue-router": "^4.0.13",
    "vuetify": "^3.4.0-beta.1",
    "vuex": "^4.1.0",
    "webfontloader": "^1.0.0"
  },

有人可以告诉我我哪里出错了吗？我真的很感激。

我尝试根据 ChatGPT 给出的解决方案设置 vuetify.js，但它对我不起作用：

// Styles
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'

import { createApp } from 'vue'
// Vuetify
import { createVuetify } from 'vuetify'

export default createVuetify({
  // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
  icons: {
    iconfont: 'mdi',
  },
  breakpoint: {
    thresholds: {
      xs: 340,
      sm: 540,
      md: 800,
      lg: 1280,
      mdAndUp: 800, // with or without this line are both tried
    },
  },
})

Answer 1

$vuetify.breakpoint

来自 Vuetify 2。

您正在使用 Vuetify 3。

请查阅最新的文档。应该是

$vuetify.display.mdAndUp