The submission form should trigger the submit event upon completion

I am facing an issue with a Vue login component failing a test:

LoginForm should emit submit event

Error:
  submit event should be emitted when submitting form

expect(jest.fn()).toHaveBeenCalled()

Expected number of calls: >= 1
Received number of calls:    0

Button:

  <button type="button" id="login-button" :disabled="!enableSubmit" @click="submit()">Submit</button>

Methods:

 submit() {
    if(this.username != "" && this.password != "") {
      this.$emit("You have successfully loged in", this.username && this.password)
    } else {
      console.log("Not logged in")
    }
  }

Can someone guide me on how to correctly emit the submit event?

javascriptvue.js

Answer №1

sendForm() {
  if(this.email != "" && this.password != "") {
    this.$emit("formSubmitted", this.email && this.password)
  } else {
    console.log("Cannot submit form, missing information")
  }
}

To capture the form submission event from a child component in your parent component, follow these steps:

<Login @formSubmitted="handleFormSubmission" />


methods: {
  handleFormSubmission(formData) {
    console.log(formData)
  }
}

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

Prioritize loading the JS function before initiating PHP validation

My current challenge involves calling a JavaScript function from PHP upon form submission. The error message I am encountering indicates that the function is not defined. This issue arises because PHP is loaded before JavaScript, resulting in the function ...

javascriptphpjqueryhtmlajax

The full screen menu is exclusively displayed in the navigation bar

My HTML and CSS code is causing an issue where the full-screen menu only appears in the nav bar. This problem seems to be specific to Safari. To solve the issue, I need to remove the following code: .nav { position: fixed; } However, I still ...

javascripthtmlcss

Tips for integrating ons-sliding-menu into ons-navigator using Angular ui-router?

I'm having trouble loading ons-sliding-menu inside the ons-navigator using angular ui-router. Can someone please take a look at my code below and let me know what I'm doing wrong? I'm not getting any errors in the console, but it's just ...

javascriptangularjsangular-ui-routeronsen-ui

Using React Native with TypeScript to Select the Parent and Child Checkboxes within a FlatList

My objective is to ensure that when a user selects a checkbox for one of the parent items ('Non Veg Biryanis', 'Pizzas', 'Drinks', 'Desserts') in the flatlist, all corresponding child items should also be selected au ...

javascriptreactjstypescriptreact-nativereact-hooks

Top method for removing quotation marks from form input using jquery

Here is a form input that I need to handle: <tr class="formulaRow"> <input type="text" class="ingredient required" name="ingredient"> </tr> Currently, the value from this input is stored as follows: var ingredient = $(".formulaRow").fi ...

javascriptjqueryhtml

Display "Page Loading Error" when submitting a form with jQuery Mobile via JavaScript

While working on my jQM project, I encountered an issue with form submission. Instead of using the "action" URL to submit the form, I opted to use JavaScript to submit the form after validation by another JS addon. Once validated, the form is submitted usi ...

javascriptajaxformsjquery-mobile

I'm puzzled as to why I have to encode the path parameter twice in order for the REST call to properly handle special characters

I have a challenge with a REST call that fetches a product's ingredients using the product name as the path variable. I allow for any character to be used, and I know I need to use encodeURIComponent(name) to encode characters such as "/" to prevent m ...

javascriptangularhttpcharacter-encoding

Turn off the ability to debug XHR requests in the developer tools of all web browsers for my website

Is there a method to prevent website users from viewing the communication between my web application and the server via ajax requests? Is there a way to achieve this on my website using code? I want to make sure that the XHR, Ajax calls, and responses ca ...

javascriptjqueryajaxbrowser

What is the best way to insert a YouTube video into a WordPress template page?

I decided to create a new template page for one of the pages on my WordPress site because I only wanted to have some text and a YouTube video displayed. It turns out that embedding a YouTube video directly into the code is not supported by WordPress, so I ...

javascripthtmlwordpressyoutube

Divide the table header column "th" into two separate columns

Can someone assist me in achieving the output displayed in the image? I want to separate the header th into two lines like the blue line shown. I need two headers for a single td column. Please help, thank you. https://i.sstatic.net/SwILH.png <style& ...

javascripthtmlcss

Ways to update font color using bootstrap-cue

Looking for a button with white text on a dark-blue background Find the code in xxx.vue <b-dropdown text="user" right variant="blue" class="signout-button"> <b-dropdown-item @click="toMain()">sign out</b-dropdown-item> </b-dro ...

cssvue.jsbootstrap-4

Can you please tell me the CSS pseudo element that corresponds to the AM/PM field in an <input type="time">

The issue with the am/pm display is dependent on the browser that the app is opened in. I am looking for a universal solution to ensure it does not appear in any popular browsers. Below is the HTML code for my input time field: <input type="time" for ...

javascripthtmlcss

The content displayed on body.innerHTML does not match the information found in the page source code

Why is the page source newer than the document.body.innerHTML, and how does this happen? While watching a video on YouTube and inspecting the page source in Chrome's console, I noticed that YouTube assigns a unique signature to all videos. Here are t ...

javascripthtmlyoutubeconsole.log

How can I access a variable from one function within a different function?

function var1() { console.log("inside function one"); var varval1 = "purpose"; alert("value of var one is" + varval1); return varval1; } function var2() { console.log("within function two"); alert("value of var two is" + varval1); ...

javascripthtml

The method this.$refs.myProperty.refresh cannot be invoked as it is not a valid

I have added a reference value 'callingTable' to a vue-data-table (using vuetify) like so: <v-data-table :headers="callingTableHeaders" :items="getCallingDetails" class="elevation-1" ref="callingTable&quo ...

javascriptvue.jsvuetify.js

What could be causing the Angular router outlet to not route properly?

Check out this demo showcasing 2 outlets (Defined in app.module.ts): <router-outlet></router-outlet> <router-outlet name="b"></router-outlet> The specified routes are: const routes: Routes = [ { path: 'a', com ...

javascriptangulartypescriptangular-routing

Using jQuery to define a variable with .attr method and subsequently modifying it

I am trying to work with multiple fields, some of which have corresponding labels: <input id="1" /><label for="1" /> <input id="2" /> <input id="3" /><label for="3" /> My goal is to retrieve the "for" attribute value from ea ...

javascriptjquery

Switch between showing the Font Awesome TitleText and its associated Class with a single click

Can the value of the title attribute for <i> be toggled? For example, if the title is set to <i title="Favorite This Post" class="fa fa-star-o" aria-hidden="true"> within <div class="postoption"> I would like to toggle both the title te ...

javascriptjquerycssfont-awesome

HTML: Body with a larger height than its actual content dimensions

My Chrome browser extension seems to have a body that is much taller than its actual content: https://i.sstatic.net/t44t6.pnghttps://i.sstatic.net/8WjzD.png Even though there are no other parent div elements, the height of the <div id='app'& ...

javascriptcssgoogle-chrome-extension

Interactive <li></li> element for news ticker

Hello there! I am currently retrieving JSON data from a Wordpress site and converting the titles into list items as shown below: <?php $get=file_get_contents("https://www.thekashmirmonitor.net/wp-json/wp/v2/posts?categories=192"); $var=json_decode($get ...

javascriptphphtmljsonwordpress