How to override the vue component props with condition check?

user_3943632 0
Viewed 377

What's the recommended way to override/extends a component? E.g. I want to override the vuetify component VTextField:

<script>
import { VTextField } from 'vuetify/lib/components';

export default {
  name: 'RTextField',
  extends: VTextField,
  props: {
    outlined: {
      default: true,
    },
    hideDetails: {
      default: true,
    },
  },
};
</script>

Above I used the extends to override some default props values.

I want to ask how to conditional set the value for hideDetails, for example based on a specific prop value hint, if there is a hint prop in RTextField, and the hideDetails should be set to false

`<r-text-field hint="xxx detail description">`
vuejs2 vuetify.js vue.js
1 Answers

Instead of extending, you can wrap VTextField, that way you have complete control over the props and how they should be forwarded to the wrapped component.

Untested:

<template>
  <v-text-field
    :outlined="outlined"
    :hide-details="$attrs.hint ? false : hideDetails"
    v-bind="$attrs"
    v-on="$listeners"
  />
</template>

import { VTextField } from 'vuetify/lib/components'

export default {
  name: 'RTextField',

  components: {
    VTextField,
  },

  // We'll pass attrs as props via v-bind
  inheritAttrs: false,

  props: {
    outlined: {
      type: Boolean,
      default: true,
    },
    hideDetails: {
      type: Boolean,
      default: true,
    },
  },
}
user_7340400
Related