CODEWITHSUNDEEP
vue.jsvuetify.js
nachocab
nachocab

Reputation: 14454

How to extend a Vuetify component and keep the ref?

I'm currently using a v-textarea like this:

# Main.vue
v-textarea(ref="myTextArea")

I would like to put a transparent wrapper around it so I can use the same customized version throughout my app. I'm doing this:

# CustomTextarea.vue
<template>
  <v-textarea v-bind="$attrs" v-on="$listeners"></v-textarea>
</template>

And I'm using it like this:

# Main.vue
CustomTextarea(ref="myTextArea")

The problem is that now my ref no longer points to the actual <textarea> (it points to the custom component) so something like this no longer works:

mounted() {
  this.$nextTick(() => {
    this.$refs.myTextarea.focus();
  });
}

I don't understand the magic that Vuetify is using, but it does work in v-textarea. Is there a way to do the same in my customized component?

Upvotes: 3

Views: 2252

Answers (1)

nachocab
nachocab

Reputation: 14454

Okay, I think I found my answer here.

I just have to create the method and call it manually:

# CustomTextarea.vue
<template>
  <v-textarea 
    v-bind="$attrs" 
    v-on="$listeners"
    ref="input" //- <= add this
  ></v-textarea>
</template>

<script>
export default {
  name: 'BaseTextarea',

  methods: {
    focus() {
      this.$refs.input.focus(); //- <= call it here
    },
  },
};
</script>

I wonder if there is any way to automate this, but it works for now.

Upvotes: 2

Related Questions