Stemming from the example in the Vuetify docs I am trying to extend a component and override a method.
Unlike the example, I am trying to extend VSelect
:
<script lang="js">
import Vue from 'vue'
const VSelect = Vue.options.components["VSelect"]
const ModifiedVSelect = {
extends: VSelect
}
</script>
I’ve started simple by not trying to override anything, but instead just extend the component and see if I can import it and use it in another component:
// lots of template stuff above
<div id="itemTypes">
<ModifiedVSelect
v-model="selectedTypes"
:items="availableItems"
label="Items"
item-color="lightgrey"
item-text="items"
dense
multiple
return-object
>
</ModifiedVSelect>
</div>
// and more template stuff below
<script lang="js">
import ModifiedVSelect from '../Controls/ModifiedVSelect'
// other imports
export default {
name: 'MyComponent',
components: {
ModifiedVSelect,
// other components
},
// bunch of other stuff
</script>
This v-select
extension doesn’t render, but if I remove the import, registration and change the ModifiedVSelect
to v-select
in the <template></template>
, then it renders.
Is there something else I need to do? Doesn’t appear to be outlined in the docs if so.