v-text-field rules: required is other variable equals given value

Question

How to set a rule which says: Required if and only if foo == 10 or foo == 20

<v-text-field
  label="Bar"
  :value="bar"
  :rules="[(v) => !!v || 'Required']"
/>

Answer 1

Check this codesandbox I made: https://codesandbox.io/s/stack-71550865-textfield-validation-example-snicd0?file=/src/components/Example.vue

Remember that the conditional statement that you write in your vuetify rules, decides if the input is valid. So in order to show the Required message if and only if the value is 10 or 20. You'll need to create your rule denying that condition.

So, if the input (v) is not equal to 10 and 20, then, the input is valid, other way, show the message Required.

Also in this example I convert the input value to a number, because when you type a number in a v-text-field gets converted to a string.

<v-text-field
    label="Bar"
    :value="bar"
    :rules="[(v) => (Number(v) !== 10 && Number(v) !== 20) || 'Required']"
/>