Call method of dynamic key

Question

This is my data object:

registration: {
        step1: {
          project: '',
        },
        step2: {
          adres: '',
          facade: '',
          floor: '',
        },
      },

I am trying to validate the user inputs with a single function for each step like this:

validateStep(stepNumber) { 
    const self = this; 
    const step = step${stepNumber}; 
    console.log(step); 
    this.$v.registration[${step}].touch(); 
    if (this.$v.registration[${step}].$error) { 
      this.$q.notify('Controleer aub de velden opnieuw'); 
      return; 
    } 

    self.$refs.stepper.next();
}

But this gives this error:

TypeError: this.$v.registration["".concat(...)].touch is not a function

I also tried it like this:

validateStep(stepNumber) {
      const self = this;
      const step = `step${stepNumber}`;
      console.log(this.$v.registration[step]); //this prints the correct object
      const currentStep = this.$v.registration[step];
      currentStep.touch();

      if (currentStep.$error) {
        this.$q.notify('Controleer aub de velden opnieuw');
        return;
      }
      self.$refs.stepper.next();
    },

What am I doing wrong?

Answer 1

The Vuelidate method should be $touch instead of touch.