Vue - How to apply a dynamic, data and data-free 'v-Mask' directive?

Asked

Viewed 1,344 times

2

I’m using the v-Mask directive, but the component data is dynamic, so at certain times I use the component with mask and at other times without mask, but in the v-Mask directive, if I use it empty only, v-Mask="" returns error, I need to use the component’s html when I have mask apply v-Mask and when I have not disabled v-Mask 

<v-text-field
    :rules="rules"
    :name="schema.model"
    :id="schema.model"
    v-bind="schema.attributesTextField"
    v-model="value"
    :ref="schema.model"
    @blur="onBlur"
    @click:clear="clear()"
    @change="onChange"
    @focus="onFocus"
    @input="onInput"
    v-mask="getMask"
  >
    <template v-slot:label>
      {{schema.attributesTextField.label}}
      <span
        v-if="schema.rules.includes('required')"
        class="red--text"
      >*</span>
    </template>
</v-text-field>

import { mask } from 'vue-the-mask';

directives: {
    mask
  }

getMask() {
      return this.schema.attributesTextField.mask || 'XX';
    }
javascript vue.js mask

  • How are these dynamic data, where they are?

  • the settings to use this component are dynamic, today I use the schema-based form using Vue-form-Generator, and use this component for all types of input, such as type text, tel, number. the idea is to add this v-Mask directive to the component only when a service parameter comes.

  • Tried to put return this.schema.attributesTextField.mask || false; instead of return this.schema.attributesTextField.mask || 'XX'; ?

  • Yes I tried yes, it doesn’t work

  • So, I asked about how the data are coming, pq da to make two v-text-field elements one with Mask and the other without, and then do a v-if as the data shows one element or the other.

  • I get it, test this way, but I wanted to know if there is another way, not to keep repeating html because of a directive

Show 1 more comment

1 answer

-1

Hello, I’ve been researching about and the only way that really worked was using the directives insira o código aquiv-if/v-Else and "duplicating" its component.

The directive v-mask unaccepted false, null, undefined or "", so it can only be informed when it actually exists.

Not according to best practices but if you are correctly componentizing your project should not impact so much on code maintenance.

Browser other questions tagged javascript vue.js mask

You are not signed in. Login or sign up in order to post.