时间戳

首页 > 解决方案 > Vue无法读取未定义的属性'$refs'

vue.js - Vue无法读取未定义的属性'$refs'

问题描述

我有一个利用Vuetify的Vue应用程序。在此应用程序中，我有一个名为的组件，其设置如下：city-selector.vue

<template>
  <select-comp
    :id="id"
    :items="cityList"
    :item-text="name"
    :item-value="cityCode"
    @input="onInput">
  </select-comp>
</template>

<script>
    import VSelect from '../vuetify/VSelect';
    
    export default {
        name: 'city-select-comp',
        extends: VSelect,
        props: {
          id: {
            type: String,
            default: '',
          },
          cityList: {
            type: Array,
              default: () => { return [] }
            },
        },
        methods: {
          onInput() {
            //Nothing special, just $emit'ing the event to the parent
          },
        },
    }
</script>

这个组件的一切工作正常，除了当我打开我的开发工具时，我得到一堆控制台错误，都说这个（或类似的东西）：

无法读取未定义的属性“$refs”

我该如何修复这片红色的海洋？

标签： vue.jsvuetify.js

解决方案

这是由于您不需要的错误导入。删除import VSelect和extends语句，您的控制台错误将消失，如下所示：

<script>
   export default {
        name: 'city-select-comp',
        props: {
          id: {
            type: String,
            default: '',
          },
          cityList: {
            type: Array,
              default: () => { return [] }
            },
        },
        methods: {
          onInput() {
            //Nothing special, just $emit'ing the event to the parent
          },
        },
    }
</script>

推荐阅读