What is the process for creating a unique Vee-Validate rule in TypeScript?

I am in the process of developing a unique VeeValidate rule for my VueJS component written in TypeScript. This rule is designed to validate two fields simultaneously, following the guidelines outlined in VeeValidate - Cross Field Validation. Here is a snippet of the code:

            <div class="form-group">
                <checkbox name="noBarcode" v-model="currentProduct.noBarcode" label=" " />
                <i class="info-icon btn-base-element-icon fa fa-info-circle" data-toggle="tooltip" data-placement="left" title="" data-original-title="Tick this checkbox if this product does not have a barcode."></i>
            </div>
            <div class="form-group">
              <text-input v-model="currentProdcut.barcode" label="BarCode" name="barcode" rules="barcode:@noBarcode" />
            </div>

Both text-input and checkbox are custom form components that utilize ValidationProvider, based on the instructions provided in Advanced Input Fields.

The custom rule I have created currently appears as follows:


extend('barcode', {
  params: ['checkbox'],
  validate(value, { checkbox }) {
    return checkbox === true || value.length > 0
  },
  message: "Please enter a barcode. If this product does not have a barcode, tick the checkbox above."
})

However, TypeScript with Vetur is throwing an error message (which seems valid):

Property 'checkbox' does not exist on type 'any[] | Record<string, any>'.

I have been unable to locate any examples of creating custom rules in TypeScript, so I am seeking guidance in that area...

typescriptvue.jsvee-validate

Answer №1

Not entirely convinced of its authenticity, but I found a solution to eliminate the error message by incorporating an interface into the 2nd argument. Here's an example:

interface Parameters {
 [index: string]: any
}

Then, within your validate function:

validate(value, { checkbox }: Parameters) {
    return checkbox === true || value.length > 0
  },

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

Updating an object property within an array in Angular Typescript does not reflect changes in the view

I am currently delving into Typescript and Angular, and I have encountered an issue where my view does not update when I try to modify a value in an array that is assigned to an object I defined. I have a feeling that it might be related to the context b ...

javascriptangulartypescriptionic-framework

Experimenting with axios.create() instance using jest

I have attempted multiple solutions for this task. I am trying to test an axios instance API call without using any libraries like jest-axios-mock, moaxios, or msw. I believe it is possible, as I have successfully tested simple axios calls (axios.get / axi ...

javascriptreactjstypescriptaxiosjestjs

Leverage the power of JavaScript functions within the app.component.ts file of

I have a JavaScript file named action.js and I am trying to incorporate it into an Angular project. After doing some research, I found out that the js file should be placed in the assets folder and the path must be referenced in the scripts array within an ...

javascripthtmlnode.jsangulartypescript

What is the correct way to utilize default props in a Typescript-powered React component?

Recently diving into React, I find myself working on a basic child-component. My goal is to establish default props so that if no specific prop is provided when the component is invoked, it automatically resorts to the preset defaults. Here's what I&a ...

reactjstypescript

Creating a sleek and modern web application using Laravel 5 and Vue JS

Using Vue JS in my Laravel 5 application is causing a blank page to appear when I use v- new Vue({ el: '#vApp', data: { todos: [ { text: 'Learn JavaScri ...

laravel-5vue.jsvuejs2

Using Required and Partial with an Array of Generic Types

I'm currently working with the following types: interface Color { color: string } type DarkerColor<T> = T & Color & { darker: string } type ColorInfo<T> = DarkerColor<T> & { hue: number luminance: number opacity ...

typescript

Looking to implement the v-model with a bootstrap-vue b-form-radio on a webpage? Here's how you can

bootstrap-vue When the server side sends me the N categories for radio button groups in JSON format, users will be prompted to rate each category as a priority - high, medium, or low. I need to dynamically generate radio button groups for each category to ...

vue.jsradio-buttonbootstrap-vueradio-group

Tips for updating VUE's main.js file to incorporate the routers/index.js configuration

What is the reason for the difference in syntax between the VUE UI main.js code generated by CLI/3 and the older version, and how does it function? What are the various components of the new syntax and how do they work? sync(store, router) // for vuex-rou ...

javascriptvue.jsecmascript-6vuexvue-cli-3

Unable to modify the active property of the specified object as it is read-only

Presented here is the interface: export interface ProductCommand extends ProductDetailsCommand { } This is the ProductDetailsCommand interface: export interface ProductDetailsCommand { id: string; active: boolean; archive: boolean; title: ...

javascriptangulartypescript

Combine two closely related functions into a single function

I'm dealing with two very similar functions: setEndTimesAndStartTimes(pricerules: PriceRule[], type: string) { this.endTimes = []; this.startTimes = []; pricerules.forEach(pricerule => { if (type === 'end') { ...

angulartypescriptfunction

Using Vue's interpolation within the src attribute of my image tag: "{{ image }}"

I am attempting to pass an image url dynamically to my Vue application, but it doesn't seem to be working. I'm starting to question if this is even achievable in Vue / Vuetify. Please confirm if this functionality is possible. <v-img class=& ...

vue.jsvuetify.js

What steps do I need to take in order for TypeScript source files to appear in the node inspector?

Currently developing a node express app with TypeScript 2.3. Compiling using tsc Interested in debugging TypeScript code using node-inspector (now included in node 6.3+) SourceMaps are enabled in my tsConfig.json file { "compilerOptions": { "targ ...

node.jstypescriptexpressnode-inspector

Effective techniques for unit testing in Vue.js

Here's a question that's been on my mind: when it comes to unit testing in Vue.js, there are several different packages available. Vue Test Utils Vue Jest Vue Cypress For enterprise projects, which of these options would be considered best ...

javascriptvue.jsvuejs2vue-cli-3vue-test-utils

Issue encountered while executing Mongoose update function in the router.patch() method

I encountered an issue while trying to update a product on a cloud-based mongoose database using router.patch(). I am simulating the update process with Postman, but I keep receiving an error that says "req.body[Symbol.iterator] is not a function." Below i ...

node.jstypescriptexpress

TS: Utilizing a generic parameter in an overloaded function call

This piece of code encapsulates the essence of what I'm trying to achieve more effectively than words: function A(a: string): string; function A(a: number): number; function A(a: any) { return a; } function B<T extends number | string>(arg: T): ...

typescript

Using VueJS: Automatically scroll to a specific line in a table when the page loads

In my element framework table, I have a list of questions. I can select one to edit, make changes, and after validating, I want the page to automatically scroll to the modified question. <template> <div> <el-table :data="lis ...

vue.jsscrollelementref

How can I use Vue to close the side Navbar by targeting the body tag and clicking anywhere on the screen?

I am looking to make a change in the Navbar position by moving it right: -500px (to close the navbar) when clicking anywhere on the window. In HTML and JS, I can achieve this by targeting the body tag. How can I accomplish this in Vue? I already have funct ...

javascriptvue.js

Configuring the default value for a selection menu in Vue3

Obtaining all available categories: const fetchCategories = async () => { let response = await axios.get(`/api/get_all_category/`) categories.value = response.data.categories } The structure of categories.value is shown here: https://i.sstatic.net ...

javascriptvue.jsvuejs3

Retrieve the Vue.js JavaScript file from the designated static directory

This is my inaugural attempt at creating a web application, so I am venturing into Vue.js Javascript programming as a newcomer. I have chosen to work with the Beagle Bootstrap template. Within my Static folder, I have a file named app-charts-morris.js whi ...

javascripthtmlvue.jsdonut-chart

Error: Uncaught TypeError - The function boss.SetBelongToClan is not defined

Currently, I am faced with an issue while working on a typescript and sequelize project within an express application. The problem arises when trying to create a type-safe interface for utilizing the associate function. Within my Instance interface, there ...

node.jstypescriptexpresssequelize-typescript