I have a form, where different validations can apply, depending on the parameter action, stored in VUEX store. I try this:

data: function() {
   const validations = {
      sendToProject: {
        cardProject: {
          required,
        },
      },
      recallToBranch: {
        fioReceiver: {
          required,
        }
      }
   }
   return {
     validations,
   }
},
validations() {
  return {
    q: this.validations[this.action]  // supposed to be this.validations['sendToProject']
  }
},
computed: {
  ...mapGetters({
    action: 'action',
  }),
},

This actually works, but throws an error while bootstraping:

[Vue warn]: Error in render function: "TypeError: can't convert undefined to object"

and that error prevents non-Vue code (Bootstrap jQuery plugins initializations, etc) from execution.

How to fix?

I have a form, where different validations can apply, depending on the parameter action, stored in VUEX store. I try this:

data: function() {
   const validations = {
      sendToProject: {
        cardProject: {
          required,
        },
      },
      recallToBranch: {
        fioReceiver: {
          required,
        }
      }
   }
   return {
     validations,
   }
},
validations() {
  return {
    q: this.validations[this.action]  // supposed to be this.validations['sendToProject']
  }
},
computed: {
  ...mapGetters({
    action: 'action',
  }),
},

This actually works, but throws an error while bootstraping:

[Vue warn]: Error in render function: "TypeError: can't convert undefined to object"

and that error prevents non-Vue code (Bootstrap jQuery plugins initializations, etc) from execution.

How to fix?

• javascript
• vue.js
• vuex

• 1 I hate to say this, but Vuelidate is really a bad library. I had the same issues so I changed to github.com/baianat/vee-validate and it's much better – samayo Commented Dec 4, 2017 at 10:13

1 Answer 1

Have you tried to use requiredIf in required validator. For example:

validations: {
  anyProp: {
    required: requiredIf(function (abc) {
      return abc > 10 && abc < 20
    })
  }
}