Currently, I am utilizing the maska npm package to mask input fields in Vuetify.
Within my setup, I have an array of masks that I make use of:
export const Masks = {
hour: { mask: "##:##", eager: true },
host: { mask: "#00.#00.#00.#00", eager: true },
port: { mask: "#0000" },
cc: { mask: "#### #### #### ####" },
ccName: { mask: "A A" },
cvv: { mask: "###0" }
};
When incorporating these masks in the <template> section of a .vue file, everything functions as expected:
<v-text-field
v-model="model.start"
v-maska:[Masks.hour]
/>
However, when working on a dynamic form component that loads the assigned mask from the model object, I encounter the following setup:
const form = {
start: {
...
mask: Masks.hour,
...
}
};
And in the template:
<div v-for="(field, index) in Object.keys(model)" :key="field">
<v-text-field
v-model="model[field].value"
v-maska:[model[field].mask]
/>
</div>
Yet, running this code snippet results in a syntax error:
ERROR Internal server error: Error parsing JavaScript expression: Unexpected token, expected "]" (1:12) 4:59:07 p.m.
Plugin: vite:vue
File: D:/Docs/Code/fresk/proteus/components/forms/dynamic-form.vue:98:13
96 | v-else-if="!model[field].type"
97 | v-model="model[field].value"
98 | v-maska:[model[field].mask]
| ^
99 | :name="field"
100| :label="model[field].label ? $t(model[field].label) : undefined"
at createCompilerError (D:\Docs\Code\fresk\proteus\node_modules\@vue\compiler-core\dist\compiler-core.cjs.js:1332:17)
at emitError (D:\Docs\Code\fresk\proteus\node_modules\@vue\compiler-core\dist\compiler-core.cjs.js:2822:5)
at createExp (D:\Docs\Code\fresk\proteus\node_modules\@vue\compiler-core\dist\compiler-core.cjs.js:2815:7)
at Object.ondirarg (D:\Docs\Code\fresk\proteus\node_modules\@vue\compiler-core\dist\compiler-core.cjs.js:2263:25)
at Tokenizer.stateInDirArg (D:\Docs\Code\fresk\proteus\node_modules\@vue\compiler-core\dist\compiler-core.cjs.js:846:16)
at Tokenizer.parse (D:\Docs\Code\fresk\proteus\node_modules\@vue\compiler-core\dist\compiler-core.cjs.js:1078:16)
at Object.baseParse (D:\Docs\Code\fresk\proteus\node_modules\@vue\compiler-core\dist\compiler-core.cjs.js:2861:13)
at Object.parse (D:\Docs\Code\fresk\proteus\node_modules\@vue\compiler-dom\dist\compiler-dom.cjs.js:703:23)
at Object.parse$2 [as parse] (D:\Docs\Code\fresk\proteus\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:1851:24)
at createDescriptor (file:///D:/Docs/Code/fresk/proteus/node_modules/@vitejs/plugin-vue/dist/index.mjs:74:43)
So, my query revolves around the process of passing a variable value within an indexed array in a v-for loop to a v-maska or any other Vue 3 directive. How can this be achieved?