Question

我正在尝试解决此问题，但我做不到 [警告]：渲染错误：“ 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 初始化@ 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 初始化@ 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 初始化@ 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.computedContentHeight（vuetify.js？ce5b：28494）在Watcher.get（vue.runtime.esm.js？2b0e：4479）在Watcher.evaluate（vue.runtime.esm.js？2b0e：4584）在VueComponent.computedGetter上[作为计算的ContentHeight]（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 初始化@ 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 初始化@ 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 初始化@ 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]并按以下方法加载文件

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中添加新属性

App.vue

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

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

使用这种方法，错误消失了，其他错误也变成了“黑暗，isActive”。

致谢

Answer 2

您可能使用了错误的显示帮助程序类

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

以您的情况

username.dispatchEvent(new Event('onChange'));

或者您可能希望将vuetify的断点与<div class="d-none d-sm-block"> <span> Your Content</span> </div>指令一起使用，这是一种更合适的数据优先方法

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

v-if

Answer 3

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

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

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

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

渲染错误：materialui

3 个答案: