Vuetify Centralize Rules

Question

With Vuetify components exist prop rules. In this case I use with methods similar to:

Some file

...
<v-text-field
  label="Name"
  v-model="name"
  :rules="[required]"
></v-text-field>

methods: {
 required(i) {
  return ( i === null | i === "")? "Field Required":true;
 }
}
...

Now, I have many forms with a lot of fields, selects, text field, boolean, etc. I try to centralize the rules in one file because i try to repeat the same code.

rules.js

function REQUIRED(i){
  return ( i === null | i === "")? "Field Required":true;  
}

export { REQUIRED }

Some file

...
<v-text-field
  label="Name"
  v-model="name"
  :rules="[REQUIRED]"
></v-text-field>

<script>
import { REQUIRED } from "./../../StaticRules/rules.js"
</script>
...

But always send me this error:

[![enter image description here][1]][1]

I search some information and this problem is similar I have, but I think is not a best solution. How to import a external function in a Vue component?

So, How I can centralized the rules? [1]: https://i.stack.imgur.com/VaRgX.png

That error simply means that you need to put `REQUIRED` somewhere in the component definition so that Vue can know about it. For example, you can just add it in your `data` section: `data() { return { REQUIRED, ... }; }` — 0x5453, Jul 17 '20 at 20:04
Thanks for response @0x5453 and yes this answer my question. — carlos-silva, Jul 17 '20 at 20:19

Vuetify Centralize Rules

0 Answers0