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

【问题标题】：Vue Cannot read property '$refs' of undefinedVue无法读取未定义的属性'$refs'
【发布时间】：2019-06-06 18:26:20
【问题描述】：

我有一个利用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.js vuetify.js

【解决方案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>

【讨论】：