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

Question

我正在尝试解决这个问题，但我做不到 e警告]：渲染错误：“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 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 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 (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) 在 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 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 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 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 再显示 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] 并按如下方法加载它

ma​​in.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 中，您必须添加新属性

App.vue

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

用这个方法你就不需要<v-app>

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

问候

Answer 2

您可能使用了不正确的显示助手类

https://vuetifyjs.com/en/styles/display/

你的情况

<div class="d-none d-sm-block">
 <span> Your Content</span>
</div>

或者您可能希望使用带有v-if 指令的 vuetify 断点，这是一种更适合数据优先的方法

https://vuetifyjs.com/en/customization/breakpoints/

<div v-if="this.$vuetify.breakpoint.smAndUp">
 <span>Your Content</span>
</div>

Answer 3

我遇到了同样的错误，但只是在从“画布”转到“文档”选项卡时：

经过长时间的挣扎，我能够确认这是因为我在我的故事文件的模板中添加了一个未使用的参数“args”：

                    |  
------------------  v  ----------------
 const Template = (args) => ({
  components: { KpiCard },
  template: `
    <KpiCard >
      <v-skeleton-loader type="card" />
    </KpiCard>              
  `,
});

所以我删除了它并且没有更多错误:)