Question

我有一个利用Vue的Vuetify应用程序。在此应用程序中，我有一个名为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>

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

1 个答案: