Issue with submitting VueJS form on mobile devices, works fine on web browsers but not on

I have encountered a similar problem before, but I haven't found a suitable solution yet.

In my VueJS application, the submit function works perfectly fine on desktop browsers like Chrome and Firefox, but for some reason it refuses to submit on mobile phones (tested with Safari).

The submit method within my component looks like this:

methods: {
     async removeBet(item) {
      this.bet.id = item
      try {
        await this.$http.post("/user/deletePendingBet", this.bet);
      } catch (err) {
        console.log(err)
      }
    },
}

I invoke the method like this:

<a class="dropdown-item" @click="removeBet(value._id)" href="/newBet">Delete</a>

I suspect that the issue lies in how the method is being called, rather than any problems with the database query.

Since I'm not very experienced in mobile development, I'm wondering if Safari requires forms to be submitted in a specific way. If so, what would be the correct approach to submitting a form using JS frameworks like Vue in such cases?

javascriptvue.jsmobilesubmit

Answer №1

It's important to avoid using anchor tags for this purpose.

If you don't prevent the browser from triggering the @click event, it will default to calling href instead of @click.

You may want to consider using <div> or <span> instead, but if you must use <a>, remove the href attribute and add 

@click.prevent="remove..."
to ensure it works as intended. This will stop the default behavior of <a> and trigger the @click event.

Make sure to include .prevent after @click. More information can be found here.

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

Utilizing JavaScript filtering logic in Angular Filter with AngularJS

This inquiry originates from this source Within the realm of Javascript, I have crafted a code to facilitate filtering, specifically showcasing elements from the array colors only if they correspond as values in cars. var colors = ["blue","red","pink","y ...

javascriptangularjs

Execute a PHP function when a post is clicked using JavaScript

I have a script that shows an image depending on database results. When a user clicks the image, it changes to a new one. The green_star signifies that both $user_id and $thedb_id are in the database, while the grey_star indicates they are not. I want to b ...

javascriptphppost

The console is throwing an error: ReferenceError: The variable $ has not been defined

I am having issues when trying to dynamically add a div upon selecting a checkbox in a Django template. The error message Uncaught ReferenceError: $ is not defined keeps appearing in the console. Here is the template code: {% extends 'base_layout.htm ...

javascriptdjangodjango-templates

No longer able to bind events after making changes to SVG elements [using JSFiddle]

I've coded a personalized directive to display tags like `<rect>` and `<circle>` within `<svg>` elements. My shapes model is simply an array of objects with different attributes such as `width`, `height`, and `stroke-width. These s ...

javascriptangularjssvgangularjs-directiveangularjs-scope

What is the best way to capture the inputs' values and store them accurately in my object within localStorage?

Is there a more efficient way to get all the input values ​​and place them in the appropriate location in my object (localStorage) without having to individually retrieve them as shown in the code below? Below is the function I currently use to update ...

javascriptangulartypescriptionic-framework

Issues with zDepth functionality in Material-UI (React.js) not being functional

Can anyone explain the concept of zDepth to me? I have a component with the following render method: render() { return ( <div> <AppBar zDepth={2} title="Some title" iconElementLeft={<IconButton onClick={this ...

javascriptreactjsmaterial-ui

How can a Link be used to open a component in Material-UI V 5.0 when using a MenuItem with onClick={popupState.close}?

Hey everyone, I spent the entire Sunday trying to create a dropdown menu in the AppBar but encountered various errors. The only menu that worked without any issues was using the "PopupState helper" which can be found at https://mui.com/material-ui/react-me ...

javascriptnode.jsreactjsmaterial-ui

Launch the Image-Infused Modal

I am completely new to the world of Ionic development. Currently, I am working on a simple Ionic application that comprises a list of users with their respective usernames and images stored in an array. Typescript: users = [ { "name": "First ...

javascriptangulartypescriptionic-frameworkionic3

CORS headers not functioning as expected for Access-Control-Allow-Origin

Can someone help me figure out how to add Access-Control-Allow-Origin: 'http://localhost:8080' in Node.js and Express.js? I keep getting this CORS error: Access to XMLHttpRequest at http://localhost:3000 from origin 'http://localhost:8080&ap ...

javascriptnode.jsexpresscors

jQuery Load - Oops! There seems to be a syntax error: Unexpected token <

Error: Uncaught SyntaxError: Unexpected token < I encountered the error message mentioned above while trying to execute a jQuery load function: $('#footer').load(UrlOfFooterContent); The variable UrlOfFooterContent holds the URL of an MVC c ...

javascriptjqueryhtml

Exploring the power of Vue i18n for prop translations in Vue applications

My goal is to translate the titles passed to my component through props. However, it seems that these strings are not being translated like the rest of my code due to being passed as props. Below are the two components I am currently working with: Parent ...

javascriptvue.jstranslationvue-i18n

Implementing v-once with v-bind:class in vue.js: A step-by-step guide

When working with Vue, I came across the following code snippet: <button v-bind:class="['mdc-tab', {'mdc-tab--active' : index===tabs.currentTab}]"></button> The issue is that this binds it to the tabs.currentTab variables, ...

vue.jsvuejs2

Enhancing x-axis presentation in D3.js-generated charts

I created a bar chart using D3.js, but I have encountered an issue with one of the values on the x-axis being too long. I attempted to use CSS properties like text-overflow: ellipsis, width: 10px, and overflow: hidden to abbreviate values that exceed a cer ...

javascriptcssd3.js

Tips for retrieving the selected option from a dropdown menu

I have a dropdown menu with checkboxes that can be selected using SumoSelect. Here is the markup for the dropdown menu: <select multiple="multiple" name="somename" id="uq" class="select"> <option value="volvo">Volvo</option> <o ...

javascriptjqueryhtmlcsssumoselect.js

Problem with running the npm start command

During the setup of my Vue.js app, I ran into an issue with npm start that is related to node_modules and nodemon. When I try to run the $npm start command, I see this error in the console: $ npm start > <a href="/cdn-cgi/l/email-protection" class= ...

node.jsvue.jsnode-modulesnodemonnpm-start

I am experiencing an issue with my date filter where it does not display any results when I choose the same date for the start and end dates. Can anyone help me troub

Having an issue with my custom filter pipe in Angular. When I select the same dates in the start and end date, it doesn't display the result even though the record exists for that date. I've noticed that I have to enter a date 1 day before or ea ...

javascriptangulartypescriptdatetimefilter

The creation of a Vite app encountered an issue with Node version 18

When I used yarn create vite to initialize my Vue project, an error message appeared after executing the command: Error [email protected]: The engine "node" is not compatible with this module. It expected version ">=12 <=16". However, it recei ...

vue.jsvite

Different body background color changes every second

I have a function called makeRandColor that generates a random color using RGB and template string literals. However, I am struggling to figure out how to make it work every second. I tried using setInterval but it doesn't seem to be functioning prope ...

javascripthtml

Enhancing Dataset Quality: Incorporating Failed Results with Apify

We have implemented the Apify Web Scraper actor to execute a URL validation task that retrieves the input URL, the title of the page, and the HTTP response status code. Our testing includes 5 URLs - 4 valid ones and 1 non-existent URL. The successful resul ...

javascriptnode.jsweb-scrapingapify

Showing arbitrary text on Vue.js template

In my Vue.js application, I have a Loader component that randomly displays one of several messages. Here is how I implemented it: Vue.component('Loader', { data() { const textEntries = [ 'Just a moment', ...

javascriptvue.js