mirrors/maska
2
0
Fork 0
mirror of https://github.com/tenrok/maska.git synced 2026-05-15 11:59:38 +03:00
Code Activity

fix(vue): use defineExpose to set argument value

Browse Source
This commit is contained in:
Alexander Shabunevich
2024-06-11 10:17:10 +03:00
parent 0285532bfc
commit e6b2799880
9 changed files with 54 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/v3/vue.md
+14 -12
View File
@@ -112,18 +112,22 @@ To get masked value you can use standard `v-model` directive on the input. But i
import { ref } from "vue"
import { vMaska } from "maska/vue"
const maskedvalue = ref('')
const unmaskedvalue = ref('')
const maskedValue = ref('')
const unmaskedValue = ref('')
defineExpose({ unmaskedValue }) // make sure you expose the bound variable
</script>
<template>
<input v-maska:unmaskedvalue.unmasked data-maska="#-#" v-model="maskedvalue">
<input v-maska:unmaskedValue.unmasked data-maska="#-#" v-model="maskedValue">
Masked value: {{ maskedvalue }}
Unmasked value: {{ unmaskedvalue }}
Masked value: {{ maskedValue }}
Unmasked value: {{ unmaskedValue }}
</template>
```
!> Make sure you expose the bound variable using `defineExpose` macro.
### **Options API**
```vue
@@ -133,23 +137,21 @@ To get masked value you can use standard `v-model` directive on the input. But i
export default {
directives: { maska: vMaska },
data: () => ({
maskedvalue: "",
unmaskedvalue: ""
maskedValue: "",
unmaskedValue: ""
})
}
</script>
<template>
<input v-maska:unmaskedvalue.unmasked data-maska="#-#" v-model="maskedvalue">
<input v-maska:unmaskedValue.unmasked data-maska="#-#" v-model="maskedValue">
Masked value: {{ maskedvalue }}
Unmasked value: {{ unmaskedvalue }}
Masked value: {{ maskedValue }}
Unmasked value: {{ unmaskedValue }}
</template>
```
<!-- tabs:end -->
!> For correct work as directive argument, name of the bounded variable should be in **lower case**. So instead of `unmaskedValue` use `unmaskedvalue` or `unmasked_value`.
## Usage with Nuxt