Using VeeValidate with v-menu

Has anyone been able to successfully apply veevalidate to vuetify's v-menu component?

I've tried using the validation-provider container with other HTML inputs and it works fine, but when I try to integrate it with v-menu, it doesn't seem to work. I haven't been able to find a solution to this problem anywhere. Has anyone else faced the same issue?

<ValidationObserver v-slot="{ handleSubmit }">
    <form @submit.prevent="handleSubmit(_submit)">
        <validation-provider rules="required" v-slot="{ errors }">
            <v-menu width="300" max-height="400">
                <template v-slot:activator="{ on, attrs }">
                    <b-input-group v-on="on" v-bind="attrs" class="mr-sm-2 mb-sm-0">
                        <b-input-group-prepend>
                            <span class="input-group-text" id="basic-addon1">
                                <i class="i-Music-Note-2 text-18"></i>
                            </span>
                        </b-input-group-prepend>
                        <b-form-select id="inline-form-input-username"></b-form-select>
                        <span class="text-red">{{errors[0]}}</span>
                    </b-input-group>
                </template> 
                <template v-for="items in item_list">
                    <p>{{item.name}}</p>
                </template>
            </v-menu>
        </validation-provider>
    </form>
</ValidationObserver>

Answer №1

The ValidationProvider is designed to search for the initial v-model or value occurrence and monitor them during re-renders for validation purposes.

If your v-menu does not utilize v-model or does not contain a related node, vee-validate will not be able to detect any input values.

To manage validation independently, you can utilize the validate method and trigger it based on any desired event, as long as it includes the input value in that event.

<validation-provider rules="required" v-slot="{ errors, validate }">
  <someNode @input="validate" />
</validation-provider>

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

Experiencing difficulty with implementing an Angular filter to search through a list

Currently, I am utilizing an angular filter to search through a list. The searching functionality using the filter works as expected. However, I have encountered an issue with a checkbox labeled 'Select All'. When I search through the list and on ...

Troubleshooting the Timepicker import issue in ant design version 5.0.3

After updating ant design to version 5.0.3, I encountered the Uncaught Error: Cannot find module 'antd/lib/time-picker/style' at webpackMissingModule issue. Any suggestions on how to resolve this? I am seeking a solution for the error coming fro ...

Getting Errors When Retrieving Data with Apostrophe Symbol ' in Node.js

I am currently developing a Next.js API page to extract data from a series of URLs. Interestingly, the URLs containing an apostrophe character ' fail to return any data, while those without it work perfectly fine. Surprisingly, when I execute the same ...

What are the best practices for implementing jquery owlCarousel within an Angular 4 component?

I've included my 'carousel.js' file like this: $('#owl-carousel-1').owlCarousel({...}); and in carousel.component.html, I have: <div id="owl-carousel-1" class="owl-carousel owl-theme center-owl-nav home- carousel">....< ...

Why is the refresh endpoint generating new tokens when an outdated refresh token is used?

Greetings! I am currently utilizing two npm libraries, namely bcrypt and jsonwebtoken. I have implemented an endpoint called /refresh-token wherein I aim to generate a new set of access and refresh tokens. The process involves sending the refresh token to ...

Leverage the power of Sass styles throughout your Vue.js project

Attempting to utilize sass globally in a vue.js app, I followed this method: const { defineConfig } = require('@vue/cli-service') module.exports = { css:{ loaderOptions:{ sass:{ data:`@import "@/sass/t ...

Error: Failed to decode audio content due to a DOMException that was caught in the promise

Encountering an issue with the decodeAudioData method while utilizing the Web Audio API for playback in Chrome (works seamlessly in Firefox)- Sending the audio buffer, which has been recorded by the media recorder, back from the server. Server-side wss ...

Is there a way to automatically extract data from a CSV file and display it on a website using either PHP or JavaScript?

I have a web service link at www.xyz.com/abcdefg. When I visit this link, it automatically downloads a CSV file. The CSV file contains columns of data organized like this: Column A Column B Column C Column D test1 1 5 ...

There seems to be a hiccup in the distribution build of Angular grunt, as it is unable to locate the

While testing the build, everything runs smoothly. However, when attempting to build the distribution, an error is encountered: An error occurred: Cannot find module '/Users/matt.sich/Documents/angularProjects/firstProject/node_modules/grunt-usemin/l ...

What steps should I take to incorporate Google sign-in on my website and gather user information efficiently?

I am looking to add the Google sign-in button to my website. While I am knowledgeable in HTML, PHP and JavaScript are not my strong suits. My goal is to allow users to sign in with their Google account and securely store their information on my database th ...

Error: The OOP class value for translateX in the Web Animation API is returning as undefined

I'm currently working on a basic animation project using JavaScript. I have utilized the Animation class from the Web Animation API. My goal is to create multiple instances of this class in order to animate different elements with varying values and r ...

Exploring the wonders of Lightbox when dealing with content loaded via AJAX

Using Bootstrap 5 along with the Lightbox library from , I encountered an issue. The Lightbox feature functions properly on regular page loads, but fails to load on content loaded via AJAX. I attempted to resolve this by implementing the following code: ...

Looking to display an element right away, like a loading spinner, in Vue? If nextTick isn't doing the trick, here's what you can try

Imagine having a Vue component stored in a .vue file with a data member called isLoading: false. The template includes: <div v-show="isLoading" id="hey" ref="hey">Loading...</div> <button @click="loadIt()">Load it</button> Along w ...

Tips on changing the name of a property within an object using JavaScript

While this question may appear to be a duplicate, there is actually a distinction. I am attempting to provide a new key that does not contain any spaces. {order_id :"123" , order_name : "bags" , pkg_no : "00123#"} My goal is ...

Ways to identify if the text entered in a text area is right-to-left justified

Within a textarea, users can input text in English (or any other left-to-right language) or in a right-to-left language. If the user types in a right-to-left language, they must press Right-shift + ctrl to align the text to the right. However, on modern O ...

display data labels within the chart - utilizing the power of angular.js in conjunction with chart.js

My goal is to display the chart's information without requiring the user to hover over any part of the chart. I am utilizing Chart.js with Angular.js I have the same question as this one posted here: question here! html code: <div class="wrapper ...

What could be the reason for the malfunctioning of the header() function in PHP

Currently, I'm utilizing AJAX to facilitate user registration for a service. Here's the code snippet for the submit button: <input type="button" id="register" name="register" class="btn btn-success" onclick="registration();" value="Register"/ ...

Problematic Situation Arising from JavaScript AJAX and NVD3.JS Unresolved Object Error

I am currently in the process of developing a script that will allow me to retrieve data for my chart from an external PHP file. Initially, I attempted manually inputting the data into the chart and it worked perfectly fine. However, when I tried using A ...

In node.js, the global variable fails to update within a while loop

I need to store data in an array every 5 seconds. My initial approach was: setInterval(function() { data.push({ price: getCurrentPrice(), time: moment().format() }) }, 5000); However, after running for exactly half an hour, the s ...

Issue with Hover Effect on Safari Browser

Encountering a peculiar issue exclusively in Safari - when hovering over a link in the header, the links to the right of the hovered-over link alter their size (appearing smaller) during the hover animation. Once the animation concludes, these links revert ...