Validating a v-form within a for loop while using dynamic refs

Encountering an issue with validating a v-form from Vuetify. When attempting to validate each tab within a function, the following error message is received:

Error in v-on handler: "TypeError: this.$refs.formTest1.validate is not a function"

The validation function being used is as follows:

validateTab() {
  return (
    this.$refs["formTest1"] as Vue & {
      validate: () => boolean;
    }
  ).validate();
},

There is also a loop that iterates through every test as shown below:

        <v-tab-item
          v-for="test in system.test"
          :key="test.key"
        >

The code snippet for creating v-forms for each iteration is included here:

<v-form
   :ref="'form' + test.id"
   v-show="test.schema"
   v-model="validationMap[test.id]"
>
   <v-jsf
     // some dialog 
   />
</v-form>

The validationMap structure consists of IDs as strings paired with booleans representing the validations.

It appears unable to access the validate() function of v-form and the attempts to resolve the issue with indexing have led to error messages.

Further details can be found in a related thread: linked here.

Seeking assistance and any insights on resolving this issue. Thank you!

Answer №1

Here is the solution that solved my issue:

    let formRefs = this.$refs;
    for (let form in formRefs) {
      formRefs[form].validate();
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Could someone provide some insights on how the ( !! ) operator functions?

Angular 6 has arrived and while browsing through a quick tutorial on Medium, I stumbled upon this interesting piece of code. else if (!!this.day4Name && !this.day5Name && days[date] !== this.day4Name) { this.day5Name = days[date]; ...

Debugging TypeScript on a Linux environment

Approximately one year ago, there was a discussion regarding this. I am curious to know the current situation in terms of coding and debugging TypeScript on Linux. The Atom TypeScript plugin appears promising, but I have not come across any information ab ...

How to retrieve static attributes while declaring an interface

class A { public static readonly TYPE = "A"; } interface forA { for: A.TYPE } I am facing an issue while trying to access A.TYPE from the forA interface in order to perform type guarding. The error I encounter is: TS2702: 'A' only refe ...

Can webpack effectively operate in both the frontend and backend environments?

According to the information provided on their website, packaging is defined as: webpack serves as a module bundler with its main purpose being to bundle JavaScript files for usage in a browser. Additionally, it has the ability to transform, bundle, or ...

then() will execute before all promises in promise.all() are resolved

Implementing the async-await technique to handle the promises, I encountered an issue where then() is being called before the completion of Promise.all(). Revised After changing from Promise<void> to Promise<string>, the problem persists wi ...

Incorporating Common Types for Multiple Uses

Is there a way to efficiently store and reuse typings for multiple React components that share the same props? Consider the following: before: import * as React from 'react'; interface AnotherButtonProps { disabled?: boolean; onClick: (ev ...

Traversing through an array and populating a dropdown menu in Angular

Alright, here's the scoop on my dataset: people = [ { name: "Bob", age: "27", occupation: "Painter" }, { name: "Barry", age: "35", occupation: "Shop Assistant" }, { name: "Marvin", a ...

JavaScript and Angular are used to define class level variables

Hello, I'm currently diving into Angular and have encountered an issue with a class level variable called moratoriumID in my component. I have a method that makes a POST request and assigns the returned number to moratoriumID. Everything seems to work ...

Vue.js bootstrap-vue input number has a unique MaxLength feature that sets the

Is there a way to limit the input length for an input field from bootstrap-vue? I tried using maxLength, but it seems that it's not supported based on their documentation. If I remove type="number", the limitation works, but then it won't restric ...

What is the rationale behind assigning a random value to the `(keyup)` event in order to update template local variables in Angular2?

To update #box in <p>, I need to give a random value to the (keyup) attribute. Here's an example: <!-- The value on the right of equality sign for (keyup) doesn't matter --> <input #box (keyup)="some_random_value" placeholder ...

The ability to connect to 'ngModel' is not possible as it is not recognized as a valid attribute of the 'p-autoComplete' component

After successfully installing PrimeNg, I encountered an error while using the p-autoComplete component. Despite my efforts to troubleshoot and replicate an official demo from PrimeNg, the issue persists. In order to install PrimeNg, I followed these steps ...

What is the best way to showcase column data in a React table when the data within the column is an array of objects?

Utilizing a react table to showcase a data table. In the tags column, the goal is to display all tags present in the tags array of objects. Despite several attempts, no success has been achieved yet. Being new to working with tables, any guidance on a more ...

Delay the v-alert display after an item is added to the array basket using setTimeout

here is my custom rightTableMenu template <template> <div> <h1 align="center">{{ title }}</h1> <v-alert type="info" icon="mdi-emoticon-sad" v-if="basketStatus"> Empty Basket, please add some to basket < ...

What is the reason behind VS Code not showing an error when executing the command line tsc shows an error message?

Deliberately introducing a typo in my code results in an error. Here is the corrected code: declare const State: TwineState; If I remove the last character and then run tsc on the command line, it throws this error: tsc/prod.spec.ts:7:22 - error TS2304: ...

An external script containing icons is supposed to load automatically when the page is loaded, but unfortunately, the icons fail to display

Hello and thank you for taking the time to read my query! I am currently working in a Vue file, specifically in the App.vue where I am importing an external .js file containing icons. Here is how I import the script: let recaptchaScript2 = document.creat ...

Is it time for a Vuetify3 update with new pagination features?

<template> <v-app> <v-container> <div class="search-section"> <div class="search-fields"> <v-text-field v-model="search" label="Full Name"></v-text ...

I am struggling to understand the significance of the $ symbol in this particular context

I came across the following snippet in a book I've been reading: `images/${Date.now()}.jpg` The curly brackets used here signify 'out of string', but I'm unsure about the meaning of $... P.S. Honestly, I didn't want to ask a que ...

Create a minimalist Vue table design that enforces a maximum of 2 or 3 columns within

Is there a way to make my v-simple table with v-chips and v-badges align correctly in two or three column peer cell format? Here is the table for reference: https://i.sstatic.net/OFCyx.png Currently, I only have scoped styling applied: <style scoped> ...

Experimenting with a VueJS component that includes custom-made sub-components

Working on a website with multiple components that include other components, I am currently trying to test if the save button of a form is correctly deactivated when no data is set. For the UI, I am using vuetify and for testing, Jest. Let's take a l ...

The V-For directive fails to produce any output

I'm brand new to working with vue.js. I've been attempting to display a v-for in the middle of a table on my webpage, but despite no error messages being shown, my element isn't showing up as intended. I can confirm that my data is being p ...