Comments (16)
@marcellopato você importou o pacote de forma errada.
Faça conforme abaixo que dará certo:
import { mask } from 'vue-the-mask'
export default {
directives: { mask },
from vue-the-mask.
Just fixed it for v-money. I'll let you know if it works for vue-the-mask
from vue-the-mask.
Caro @neves , sou meio novato em VueJS e adorei seu pacote, mas gostaria de saber como o uso em uma página Laravel.
Nessa página eu já tenho uma instancia Vue para duplicar linhas de um form e agora quero usar o mask para campos como CNPJ, CPF, etc.
Dentro da tag <script> tenho:
import VueTheMask from 'vue-the-mask'
var app = new Vue({
el: '#app',
data: {
vidas: [
{
nome: '',
grau: '',
nascimento: ''
}
]
},
methods: {
addNovaVida () {
this.vidas.push({
nome: '',
grau:'',
nascimento: ''
})
},
deleteVida (index) {
this.vidas.splice(index, 1)
}
}
})
E no input onde quero mascarar:
<input type="text" class="form-control" id="CpfCnpj" aria-describedby="CpfCnpj" v-mask="'##.###.###/####-##'">
Mas não está rolando. Que bobagem estou fazendo?
Obrigado!
from vue-the-mask.
@gfviegas Try again 0.11.0-alpha.1
import VueTheMask from 'vue-the-mask'
Vue.use(VueTheMask)
Or just directive inside component:
import {mask} from 'vue-the-mask'
export default {
directives: {mask}
}
from vue-the-mask.
v-money already can be used as directive, but still doesn't work with vuetify because the root element is not the input. If I fix it, I'll try to do the same with vue-the-mask.
from vue-the-mask.
v-money works great as directive! I am looking forward for the vue-the-mask
from vue-the-mask.
@neves any news? v-mask sucks and i dont wanna stick with it!
from vue-the-mask.
@gfviegas Try the latest alpha version using:
yarn add vue-the-mask@alpha
from vue-the-mask.
nope...
console error thrown:
vue-the-mask.js?3d13:1 Uncaught ReferenceError: mask is not defined
at Object.defineProperty.value (vue-the-mask.js?3d13:1)
at t (vue-the-mask.js?3d13:1)
at Object.eval (vue-the-mask.js?3d13:1)
at t (vue-the-mask.js?3d13:1)
at e.exports.#.pattern (vue-the-mask.js?3d13:1)
at eval (vue-the-mask.js?3d13:1)
at eval (vue-the-mask.js?3d13:1)
at eval (vue-the-mask.js?3d13:1)
at Object.<anonymous> (app.js:1830)
at __webpack_require__ (app.js:660)
I've tried several masks combination, with raw input tag and a custom input component but none of them worked.
I'm using v-model and i've tried using the v-mask as you've inserted in the docs v-mask="'##/##/####'"
to test
from vue-the-mask.
Oh, @neves , i've noticed that in docs.vue you've inserted the working example as:
<div class="field" v-mask="'##/##/####'">
<input type="tel" placeholder="dd/mm/yyyy" />
</div>
but it's telling to insert the v-mask on the input tag on the example code. Which one is right?
from vue-the-mask.
@neves Should I import anything in my .vue file and declare it as a directive?
EDIT: Actually I think it's a problem with your version. Even though I use the way I was using (with your component as usual), the error is thrown. It only goes away when I comment the Vue.use(VueTheMask)
line.
from vue-the-mask.
Try the latest version, there was a typo.
The correct way to use is in the input.
from vue-the-mask.
@neves the mask simply won't apply.
Do i need to import anything and declare as a directive or a component?
I'm currently doing so globally, in my main file:
import VueTheMask from 'vue-the-mask'
Vue.use(VueTheMask)
from vue-the-mask.
@neves You may need to update the package version on npm.
@gfviegas use "vue-the-mask": "vuejs-tips/vue-the-mask"
on your package.json
to get the version on the master branch. It's working fine!
from vue-the-mask.
Implemented in version v0.11.0-beta
from vue-the-mask.
@marcellopato você importou o pacote de forma errada.
Faça conforme abaixo que dará certo:
import { mask } from 'vue-the-mask' export default { directives: { mask },
Obrigado @farnetani ! Agora deu certinho!
Feliz Natal!
from vue-the-mask.
Related Issues (20)
- Example of how to use vue-the-mask with antd HOT 1
- vue-the-mask and element ui input slot 2 value error
- Make the input picking smarter
- oninput="this.setCustomValidity('')" not working with vue-the-mask
- Read before posting, this project is abandoned
- Problem in implementing v-mask directive with templates HOT 1
- Please don't use it, you will regret it
- Does not works in VUE 3 + Server Sider Rendering HOT 5
- credit card holder name always uppercase mask
- Corrupted links in README.md
- please only work if there is a binding value HOT 1
- Pattern range HOT 1
- Mask phone number with 10 or 11 digits HOT 1
- Typescript 5 An argument for 'vnode' was not provided.
- Library Suggestion - Currency input
- Setup with vue + inertiajs HOT 1
- Bug - 2 regex for 2 different formats don't work
- nuxt3 import HOT 1
- cursor is jumping to back position when typing in Firefox
- Typescript support
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-the-mask.