Issues with Vue.js 2.0 Vee Validate plugin failing to remove errors following an AJAX request

I am currently working on a project using Vue.js 2.0. In this project, I have implemented the Vee-Validate plugin to handle form validation. However, after submitting the form and making an AJAX call to the API, I encountered an issue with clearing the validation errors before inviting another user using the same form.

I attempted to use the method `this.errors.clear()` as recommended in their documentation, but it did not resolve the issue.

I also considered that the process might be occurring too quickly, so I introduced a `setTimeout` function for a brief delay, but the errors still persisted.

Below is my Vue file containing all relevant code:


    <template>
      <div v-if="user.first_time_login == 0 && user.stripe_check == 1">
        ...
        (Your vue template code goes here)
        ...
      </div>
    </template>

    <script>
      import { mapState } from 'vuex'
      export default {
        data() {
          return {
            newUser: {
              email: '',
              access_leads: 1,
              access_proposals: 1,
              access_invoices: 1,
              access_projects: 1
            },
            users_invited: 0,
            invites: [],
            show_invites: false,
            adding_team_member: false
          }
        },
        computed: mapState({
          appLoading: state => state.appLoading,
          user: state => state.user
        }),
        methods: {
          submitInviteForm: function(e) {
            // Your form submission logic goes here
          },
          skipInviteForm: function(e) {
            e.preventDefault()
            alert('skip invite!')
          }
        }
      }
    </script>
  

Answer №1

Take a peek at this code example that was derived from this discussion about a validation problem. Essentially, remember to invoke this.$validator.clean(); after clearing the input fields in your form.

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

``To easily navigate through web pages, visit the website for the most

Hi there! I am new to the world of Javascript and have been practicing building my own website. I'm looking for advice on the best way to navigate between pages. index.html pages/home.html pages/about.html pages/contact.html One option would be to s ...

Sending a two-dimensional array between JavaScript functions

When trying to gather information from a user using a 2D array in Javascript, I am encountering an issue with passing the array from one function to another as an actual array rather than text. What am I doing wrong? The specific array looks like this: T ...

The determination of the volume value was impossible using only the values from the object nested within an array

I am currently developing a react app that includes a button labeled Add to create a new calculation. Each calculation consists of two input fields for thickness and surface, as well as an output field for Volume. There is also a button labelled "X" to rem ...

The custom component I created seems to be unaffected by the inline styles in React

Having an issue with a custom component where I am trying to add margin-top in one of my uses. I attempted using <MyComponent style={{ marginTop: '10px' }}> and also const myStyle = { marginTop: '10px' }; `<MyComponent style= ...

Python sends back a list containing garbled characters to Ajax

Need help fixing the output of a Python list returned to Ajax, as it appears strange. ap.py @app.route('/_get_comUpdate/', methods=['POST']) def _get_comUpdate(): comNr = request.form.get('comNr') com_result ...

How can jQuery distinguish between implicit and explicit CSS height values?

When working with jQuery, I have noticed that both $('#foo').height() and $('#foo').css('height') will return a value regardless of whether a height property is explicitly set using CSS. Is there a way to determine if an eleme ...

JSON variable unable to be stored in database

I have a Django application where I am attempting to save the configuration of a gridster widget as a JSON variable in the database. However, when I click the "Update" button on the webpage, no value is stored in the database. Below is my JavaScript code ...

TS2345: The argument provided, which is of type 'Event', cannot be assigned to the parameter expected, which is of type 'HtmlInputEvent'

I am facing an issue while trying to upload a file, and I could use some assistance in resolving it. Angular-----Error: src/app/admin/producto/create-producto-dialog.html:38:47 - error TS2345: Argument of type 'Event' is not assignable to parame ...

Having trouble displaying the classes of checkboxes when using a filter

CHECKBOXES: <div class="categs" id="filters"> <div class="categhead"> <p>Ranking</p> </div> <div class="categsort"> ...

Issues with Imported Routes Not Functioning as Expected

I am currently working on implementing routing in my Angular 2 project. All the components are functioning properly, but I encounter an error when I include 'appRoutes' in the imports section of app.module.ts. An unexpected TypeError occurs: C ...

Mixing pipe operators with Angular Observables in an array

In my project, I have an interesting scenario where I am using Observables and piping them to multiple functions as shown below. getOrders(filters: any, page: any = 1, orderBy: string = 'deliver_on', sort: string = 'asc') { const op ...

The extjs datecolumn is displaying dates with a one-day discrepancy

My Ext.grid has a datecolumn, but I'm experiencing an issue where the dates displayed are off by one day. The problem seems to be related to timezones, as when data is added to the store it shows up differently later on. For example, 2013-03-31 becom ...

Utilizing the findById method to locate the identifier of a schema within an array

Hi there! I'm trying to figure out how to use the findById method for a schema within an array. Let's say I have this Schema setup: const GameSchema = new mongoose.Schema({ users: [ { user: { type: mongoose.Schema.ObjectId, ref: &ap ...

What is the best method for determining the height of a sandboxed iframe?

My website includes an iframe with the sandbox attribute. Users can set the content of this iframe directly through the 'srcdoc' attribute, which raises security concerns. I am trying to find a way to dynamically adjust the height of the iframe ...

Connect an HTML tag to information or a property

Can an HTML tag be bound to the value of a data or property in Vue 2? I experimented with different syntaxes, but none seemed to work for me. I also did some research online but couldn't find a solution. Here are a couple of examples of the syntaxes ...

What is preventing the geolocation plugin from functioning properly in PhoneGap?

For too long, I've been struggling to make the geolocation feature work. The errors on my console are as follows: Coordinates.js:69 Uncaught ReferenceError: module is not defined(anonymous function) @ Coordinates.js:69 geolocation.js:24 Uncaught Ref ...

What is the best way to ensure that all the divs within a grid maintain equal size even as the grid layout changes?

I have a grid of divs with dimensions of 960x960 pixels, each block is usually 56px x 56px in size. I want to adjust the size of the divs based on the changing number of rows and columns in the grid. Below is the jQuery code that I am using to dynamicall ...

Issue: Unable to utilize import statement outside a module as per the guidelines of the vue-test-utils official tutorial

I'm struggling to get Vue testing set up with vue-test-utils and jest. I followed the installation guide at https://vue-test-utils.vuejs.org/installation/#semantic-versioning, but can't seem to figure out what's wrong. Here's what I&apo ...

Obtain numerical values from a Vue array

I am working with an array containing the 12 months: <ul > <li v-for="item, index in 12"> <b :class="{'rounded-l-lg': index == 0, 'rounded-r-lg': index == 11}"></b> <span >{{ index + 1 }} M ...

Debugging the Force-Directed D3 Graph

I stumbled upon a fantastic article that provided a detailed guide on creating a beautiful D3 force layout graph. However, I'm facing some difficulties with the JSON source: The "links" attribute in the author's JSON doesn't seem clear to m ...