Vue 无法读取未定义的属性'$refs'

Question

我有一个利用 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"

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

Answer 1

这是由于您不需要的错误导入。删除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>