wirecardBrasil / awesome-mask

The awesome-mask runs with Vue.js and uses the vanilla-masker to make your form awesome with masks.
MIT License
165 stars 22 forks source link

Does not work with the initial quasar-framework q-input instance #34

Closed rogeriomq closed 6 years ago

rogeriomq commented 6 years ago

the mask does not initialize with the initial binding of the q-input component of the quasar-framework.

inodaf commented 6 years ago

@rogeriomq, Can you provide us a bit more verbose information? A Log or an example of your implementation...

rogeriomq commented 6 years ago

The awesome-mask is missing. To compare with v-money, I also go through the same problem. test v-money and awesome-mask

inodaf commented 6 years ago

@rogeriomq, we'll analise your Fiddle. Thanks ;)

caioincau commented 6 years ago

We do not currently support v-model.lazy, are you trying to use with it? @rogeriomq

caioincau commented 6 years ago

It's working here with Quasar

<template>
  <div class="layout-padding docs-input row justify-center">
    <div style="width: 500px; max-width: 90vw;">
      <p class="caption">Field components</p>
      <q-field
        :count="10"
        helper="Some helper"
      >
        <q-input v-mask="'money'" v-model="text" />
      </q-field>
    </div>
  </div>
</template>

<script>
import AwesomeMask from 'awesome-mask'
import {
  QField,
  QToggle,
  QDatetime,
  QOptionGroup,
  QInput,
  QSelect,
  QChipsInput,
  QRating
} from 'quasar'

import './docs-input.styl'

export default {
  components: {
    QField,
    QToggle,
    QDatetime,
    QOptionGroup,
    QInput,
    QSelect,
    QChipsInput,
    QRating
  },
  directives: {
    'mask': AwesomeMask
  },
  data () {
    return {
      text: '23232'
    }
  }
}
</script>
caioincau commented 6 years ago

The project I used to test: https://github.com/quasarframework/quasar-play

So, it is probably a specific bug with your project, I am closing the issue.