CODEWITHSUNDEEP
vue.jsvuetify.js
maxshuty
maxshuty

Reputation: 10662

Vue Cannot read property '$refs' of undefined

I have a Vue application that leverages Vuetify. In this application I have a component called city-selector.vue which is setup like this:

<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>

Everything with this component works fine except that when I open my dev tools I get a bunch of console errors all saying this (or something similar to this):

Cannot read property '$refs' of undefined

How can I fix this sea of red?

Upvotes: 2

Views: 4539

Answers (1)

maxshuty
maxshuty

Reputation: 10662

This is due to a bad import that you do not need. Remove the import VSelect and the extends statements and your console errors will disappear, like this:

<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>

Upvotes: 1

Related Questions