渲染错误：MaterialUI 中的“TypeError: 无法读取未定义的属性‘smAndDown’”

Question

我试图解决这个问题，但我不能这样做 e warn]: 渲染错误：“TypeError: 无法读取未定义的属性‘smAndDown’”

在发现

---> 在 src/components/AppToolbar.vue 在 src/App.vue 警告 @ vue.runtime.esm.js?2b0e:619 logError @ vue.runtime.esm.js?2b0e:1884 globalHandleError @ vue.runtime。 esm.js?2b0e:1879 handleError @ vue.runtime.esm.js?2b0e:1839 Vue._render @ vue.runtime.esm.js?2b0e:3550 updateComponent @ vue.runtime.esm.js?2b0e:4066 获取 @ vue.runtime.esm.js?2b0e:4479 观察者 @ vue.runtime.esm.js?2b0e:4468 mountComponent @ vue.runtime.esm.js?2b0e:4073 Vue.$mount @ vue.runtime.esm.js？ 2b0e:8415 init @ vue.runtime.esm.js?2b0e:3118 createComponent @ vue.runtime.esm.js?2b0e:5978 createElm @ vue.runtime.esm.js?2b0e:5925 补丁@ vue.runtime.esm。 js?2b0e:6477 Vue._update @ vue.runtime.esm.js?2b0e:3945 updateComponent @ vue.runtime.esm.js?2b0e:4066 获取 @ vue.runtime.esm.js?2b0e:4479 观察者 @ vue。 runtime.esm.js?2b0e:4468 mountComponent @ vue.runtime.esm.js?2b0e:4073 Vue.$mount @ vue.runtime.esm.js?2b0e:8415 init @ vue.runtime.esm.js?2b0e:第3118回2b0e:5954 补丁@ vue.runtime.esm.js?2b0e:6477 Vue._update @ vue.runtime.esm.js?2b0e:3945 updateComponent @ vue.runtime.esm.js?2b0e:4066 获取@ vue.runtime。 esm.js?2b0e:4479 观察者 @ vue.runtime.esm.js?2b0e:4468 mountComponent @ vue.runtime.esm.js?2b0e:4073 Vue.$mount @ vue.runtime.esm.js?2b0e:8415 init @ vue.runtime.esm.js?2b0e:3118 createComponent @ vue.runtime.esm.js?2b0e:5978 createElm @ vue.runtime.esm.js?2b0e:5925 补丁@ vue.runtime.esm.js?2b0e: 6516 Vue._update @ vue.runtime.esm.js?2b0e:3945 updateComponent @ vue.runtime.esm.js?2b0e:4066 获取 @ vue.runtime.esm.js?2b0e:4479 观察者 @ vue.runtime.esm。 js?2b0e:4468 mountComponent @ vue.runtime.esm.js?2b0e:4073 Vue.$mount @ vue.runtime.esm.js?2b0e:8415 Vue._init @ vue.runtime.esm.js?2b0e:5018 Vue @ vue.runtime.esm.js?2b0e:5085 eval @ main.js?56d7:20 ./src/main.js @ app.js:2296 webpack_require @ app.js:726 fn @ app.js:101 1 @ app.js:2310 webpack_require@ app.js:726 (匿名) @ app.js:793 (匿名) @ app.js:796 显示另外 22 个帧 vue.runtime.esm.js?2b0e:1888 TypeError: 无法读取未定义的属性 'smAndDown' VueComponent.compulatedContentHeight (vuetify.js?ce5b:28494) 在 Watcher.get (vue.runtime.esm.js?2b0e:4479) 在 Watcher.evaluate (vue.runtime.esm.js?2b0e:4584) 在 VueComponent.compulatedGetter [as ComputeContentHeight] (vue.runtime.esm.js?2b0e:4836) 在 VueComponent.genContent (vuetify.js?ce5b:28556) 在 Proxy.render (vuetify.js?ce5b:28571) 在 VueComponent.Vue._render ( vue.runtime.esm.js?2b0e:3548) 在 VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4066) 在 Watcher.get (vue.runtime.esm.js?2b0e:4479) 在新的 Watcher ( vue.runtime.esm.js?2b0e:4468) logError @ vue.runtime.esm.js?2b0e:1888 globalHandleError @ vue.runtime.esm.js?2b0e:1879 handleError @ vue.runtime.esm.js?2b0e:第1839章 不服输的人js?2b0e:4468 mountComponent @ vue.runtime.esm.js?2b0e:4073 Vue.$mount @ vue.runtime.esm.js?2b0e:8415 init @ vue.runtime.esm.js?2b0e:3118 createComponent @ vue .runtime.esm.js?2b0e:5978 createElm @ vue.runtime.esm.js?2b0e:5925 补丁@ vue.runtime.esm.js?2b0e:6477 Vue._update @ vue.runtime.esm.js?2b0e:第3945章 更新组件@vue.runtime.esm.js？2b0e：4066获取@vue.runtime.esm.js？2b0e：4479观察者@vue.runtime.esm.js？2b0e：4468安装组件@vue.runtime.esm.js？ 2b0e:4073 Vue.$mount @ vue.runtime.esm.js?2b0e:8415 init @ vue.runtime.esm.js?2b0e:3118 createComponent @ vue.runtime.esm.js?2b0e:5978 createElm @ vue.runtime .esm.js?2b0e:5925 createChildren @ vue.runtime.esm.js?2b0e:6053 createElm @ vue.runtime.esm.js?2b0e:5954 补丁@ vue.runtime.esm.js?2b0e:6477 Vue._update @ vue.runtime.esm.js?2b0e:3945 updateComponent @ vue.runtime.esm.js?2b0e:4066 获取 @ vue.runtime.esm.js?2b0e:4479 观察者 @ vue.runtime.esm.js?2b0e:第4468章 mountComponent@vue.runtime.esm.js?2b0e:4073 Vue.$mount@vue.runtime.esm.js?2b0e:8415 init@vue.runtime.esm.js?2b0e:3118 .js?2b0e:5978 createElm @ vue.runtime.esm.js?2b0e:5925 补丁 @ vue.runtime.esm.js?2b0e:6516 Vue._update @ vue.runtime.esm.js?2b0e:3945 updateComponent @ vue .runtime.esm.js?2b0e:4066 获取 @ vue.runtime.esm.js?2b0e:4479 观察者 @ vue.runtime.esm.js?2b0e:4468 mountComponent @ vue.runtime.esm.js?2b0e:4073 Vue .$mount @ vue.runtime.esm.js?2b0e:8415 Vue._init @ vue.runtime.esm.js?2b0e:5018 Vue @ vue.runtime.esm.js?2b0e:5085 eval @ main.js?56d7 :20 ./src/main.js @ app.js:2296 webpack_require @ app.js:726 fn @ app.js:101 1 @ app.js:2310 webpack_require @ app.js:726 (匿名) @ app.js :793 (匿名) @ app.js:796 显示另外 21 帧 AppToolbar.vue

<template>
  <v-toolbar color="indigo" dark>
    <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
    <router-link to="/"> 
    <v-toolbar-title class="white--text">Admin</v-toolbar-title>
    </router-link>
    <v-spacer></v-spacer>
    <v-badge right bottom="">
      <template v-slot:badge>
        <span>24</span>
      </template>
      <v-icon
        large
        color="grey lighten-1"
      >
        shopping_cart
      </v-icon>
    </v-badge>
    <div class="hidden-sm-and-down">
      <v-btn flat>AboutUs</v-btn>
      <router-link to="/contact"><v-btn flat>Contacts</v-btn>></router-link>
      <router-link to="/login"><v-btn flat>Login</v-btn></router-link>
    </div>
    <div class="hidden-md-and-up">
      <template>
  <v-navigation-drawer
    v-model="drawer"
    class="pb-0"
    floating
    hide-overlay
    stateless
    width="380"
    height="400px"
    margin="top"
  >
    <v-layout fill-height>
      <v-navigation-drawer
        dark
        mini-variant
        stateless
        value="true"
      >
        <v-toolbar flat class="transparent">
          <v-list class="pa-0">
            <v-list-tile avatar>
              <v-list-tile-avatar>
                <img src="https://randomuser.me/api/portraits/men/85.jpg">
              </v-list-tile-avatar>

              <v-list-tile-content>
                <v-list-tile-title>John Leider</v-list-tile-title>
              </v-list-tile-content>

              <v-list-tile-action>
                <v-btn
                  icon
                  @click.native.stop="mini = !mini"
                >
                  <v-icon>chevron_left</v-icon>
                </v-btn>
              </v-list-tile-action>
            </v-list-tile>
          </v-list>
        </v-toolbar>

        <v-list class="pt-0" dense>
          <v-divider></v-divider>

          <v-list-tile
            v-for="item in items"
            :key="item.title"
          >
            <v-list-tile-action>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-tile-action>

            <v-list-tile-content>
              <v-list-tile-title>{{ item.title }}</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
        </v-list>
      </v-navigation-drawer>

      <v-list class="grow">
        <v-list-tile
          v-for="link in links"
          :key="link"
        >
          <v-list-tile-title v-text="link"></v-list-tile-title>
        </v-list-tile>
      </v-list>
    </v-layout>
  </v-navigation-drawer>
</template>
    </div>
  </v-toolbar>
</template>

<script>
export default {
  data () {
      return {
        drawer: true,
        items: [
          { title: 'Home', icon: 'dashboard' },
          { title: 'About', icon: 'question_answer' }
        ],
        links: ['Home', 'Contacts', 'Settings'],
        mini: true,
        right: null
      }
    }
}
</script>

Answer 1

当然，您会将 vuetify 作为插件加载，这就是错误的来源。要解决此问题，请删除文件 [@/plugins/vuetify.js] 并按以下方法加载它

main.js

import Vue from "vue";
import Vuetify from "vuetify"; //<----

Vue.use(Vuetify); //<----
import "vuetify/dist/vuetify.min.css";

new Vue({
    store,
    router,
    vuetify: new Vuetify(), //<-----
    render: (h) => h(App),
}).$mount("#app");

在 #app div 上的 App.vue 中，您必须添加新属性

应用程序.vue

<template>
    <div id="app" data-app app-data="true" light>

使用此方法，您不需要<v-app>

通过这种方法，错误消失了，其他错误也消失了“dark，isActive”。

问候