vue.js - 渲染错误：materialui 中的“TypeError：无法读取未定义的属性‘smAndDown’”

Question

我正在尝试解决此问题，但我无法做到并发出警告]：渲染错误：“TypeError：无法读取未定义的属性'smAndDown'”

在发现

---> src/components/AppToolbar.vue at src/App.vue warn @ vue.runtime.esm.js?2b0e:619 logError @ vue.runtime.esm.js?2b0e:1884 globalHandleError @ vue.runtime。 esm.js?2b0e:1879 [e-mail]?2b0e:1839 [e-mail]?2b0e:3550 [e-mail]?2b0e:4066 获取@ vue.runtime.esm.js?2b0e:4479 观察者@vue.runtime.esm.js?2b0e:4468 [e-mail]?2b0e:4073 Vue.$[e-mail]? 2b0e:8415 [e-mail]?2b0e:3118 [e-mail]?2b0e:5978 [e-mail]?2b0e:5925 补丁@vue.runtime.esm。 js?2b0e:6477 [e-mail]?2b0e:3945 [e-mail]?2b0e:4066 获取@vue.runtime.esm.js?2b0e:4479 观察者@vue. runtime.esm.js?2b0e：4468 [e-mail]?2b0e:4073 Vue.$[e-mail]?2b0e:8415 [e-mail]?2b0e:3118 [e-mail] .js?2b0e:5978 [e-mail]?2b0e:5925 [e-mail]?2b0e:6053 [e-mail]?2b0e:5954 [e-mail] .esm.js?2b0e:6477 [e-mail]?2b0e:3945 [e-mail]?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 [e-mail]?2b0e:5978 [e-mail]?2b0e:5925 补丁@vue.runtime.esm.js?2b0e:6516 [e-mail] .esm.js?2b0e:3945 updateComponent @ vue.runtime.esm。js?2b0e:4066 [e-mail]?2b0e:4479 [e-mail]?2b0e:4468 [e-mail]?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 /[e-mail]:2296 [e-mail] :726 [e-mail]:101 [e-mail]:2310 webpack_require@ app.js:726 (anonymous) @ app.js:793 (anonymous) @ app.js:796 显示 22 帧 vue.runtime.esm.js?2b0e:1888 TypeError: 无法读取未定义的属性 'smAndDown' VueComponent.computedContentHeight (vuetify.js?ce5b:28494) 在 Watcher.get (vue.runtime.esm.js?2b0e:4479) 在 Watcher.evaluate (vue.runtime.esm.js?2b0e:4584) 在 VueComponent.computedGetter [as computedContentHeight] (vue.runtime.esm.js?2b0e:4836) at VueComponent.genContent (vuetify.js?ce5b:28556) at Proxy.render (vuetify.js?ce5b:28571) at VueComponent.Vue._render ( vue.runtime.esm.js?2b0e:3548) at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4066) at Watcher.get (vue.runtime.esm.js?2b0e:4479) at new Watcher ( vue.runtime.esm.js?2b0e:4468) logError @ vue.runtime.esm.js?2b0e:1888 globalHandleError @ vue.runtime.esm.js?2b0e:1879 [e-mail]?2b0e:1839 [e-mail]?2b0e:3550 [e-mail]?2b0e:4066 [e-mail]?2b0e:4479 [e-mail]?2b0e:4468 [e-mail]?2b0e:4073 Vue.$[e-mail]。 js?2b0e:8415 [e-mail]?2b0e:3118 [e-mail]?2b0e:5978 [e-mail]?2b0e:5925 [e-mail]。 esm.js?2b0e:6477 [e-mail]?2b0e:3945 [e-mail]?2b0e:4066 [e-mail]?2b0e:4479 观察者@ vue.runtime.esm.js?2b0e:4468 [e-mail]?2b0e:4073 Vue.$[e-mail]?2b0e:8415 [e-mail]? 2b0e:3118 [e-mail]?2b0e:5978 [e-mail]?2b0e:5925 [e-mail]?2b0e:6053 [e-mail]?2b0e:5954 [e-mail]?2b0e:6477 Vue.js [e-mail]?2b0e:3945 [e-mail]?2b0e:4066 获取@vue.runtime.esm.js?2b0e:4479 观察者@vue.runtime.esm.js?2b0e :4468 [e-mail]?2b0e:4073 Vue.$[e-mail]?2b0e:8415 [e-mail]?2b0e:3118 [e-mail]. esm.js?2b0e:5978 [e-mail]?2b0e:5925 [e-mail]?2b0e:6516 [e-mail]?2b0e:3945 updateComponent@ vue.runtime.esm.js?2b0e:4066 [e-mail]?2b0e:4479 [e-mail]?2b0e:4468 [e-mail]?2b0e:4073 Vue.$[e-mail]?2b0e:8415 [e-mail]?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 (anonymous) @ app.js:793 (anonymous) @ app.js:796 再显示 21 帧应用工具栏.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>

标签： vue.jsvuetify.js

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”也消失了。

问候