Validation Required in Vue

Question

I'm using vee-validate in my VueJS and I wonder how can i add a validation that if form.order == 1 then the it would be required

 <ValidationProvider rules="v-if="form.order == 1 ? required: ''" v-slot="{ errors }" name="Entity">
   <v-col md="4">
      <v-text-field
         label="First Name"
         v-model="form.first_name"
         outlined
         hide-details="auto"
         :error-messages="errors[0]"
         ></v-text-field>
   </v-col>
</ValidationProvider>

Answer 1

May I suggest you move @Phymo's answer into a computed property so you keep your template clean, readable, and extendable. that way, you can swap the implementation anytime. i.e.

<template>
  <ValidationProvider :rules="applyRules" v-slot="{ errors }" name="Entity">
     <v-col md="4">
        <v-text-field
           label="First Name"
           v-model="form.first_name"
           outlined
           hide-details="auto"
           :error-messages="errors[0]"
           ></v-text-field>
     </v-col>
  </ValidationProvider>
 </template>

<script>
export default {
  data: () => ({
    form: {
      // form structure
    }
  }),
  computed: {
    applyRules() {
      return this.form.order === 1 ? 'required' : ''
    }
  }
 }
</script>

Answer 2

try this.

:rules="form.order == 1 ? 'required' : ''"