Preventing users from entering a decimal point in Vue.js

Is there a way to prevent users from entering a decimal point in the input field below?

<b-form-input
          size="sm"
          type="number"
          v-model.number="lots"
          class="inputprice"
          style="width:40%"
          oninput="javascript: if (this.value === '.') return;"
        >{{ lots }}
 </b-form-input>

I've tried adding the validation inside the 'oninput' attribute, but it doesn't seem to be working. Does anyone know how I can achieve this restriction?

Answer №1

To convert the input value to an integer, you can utilize the parseInt method like this:

new Vue({
  el:"#app",
  data(){
    return{
      amount:0
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input
    type="number"
    v-model.number="amount"
    class="inputprice"
    style="width:40%"
    oninput="this.value = parseInt(this.value);"
  />{{ amount }}
</div>

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

How can we incorporate a Material-UI skeleton to display API response data effectively?

I have incorporated the material-ui skeleton (Shimmer effect) to display data fetched from an API. { accountData.usersAccountData.map((userData, index) => ( // ...UI code ) ) } The output is shown below : https://i.sstatic.net/MEVhA.png It can be o ...

sent a data entry through ajax and performed validation using jquery

Is there a solution to validating the existence of an email value using ajax after validation work is completed? Despite attempting to check for the email value and display an alert if it exists, the form continues to submit regardless. See below for the ...

Ways to retrieve element values in JavaScript without relying on IDs

Imagine for a moment that I had the subsequent code: <div class="post"> <h2 itemprop="name"> <a href="http://www.example.com">The Post Title</a> </h2> <div class="details"> <span> <em class="date" ...

Why is AngularJS redirection not retrieving the value from window.localStorage?

After utilizing local storage, I encountered an issue where upon logging in and being redirected to the myprofile page, the local storage value was not loading properly. Instead, I was getting a null value. It wasn't until I manually reloaded the page ...

What are the advantages of using React JS for a Single Page Application compared to server-side rendering?

Currently, I am faced with a conundrum when it comes to selecting the best approach for a highly scalable project. On one hand, server-side rendering using Node.js with Express (utilizing EJS) to render full HTML pages is an option. On the other hand, ther ...

Convert a JSON object into a string using Node.js

Here is my code snippet: app.get('/status',function ( req,res) { var data = { "error": 1, 'data status': "" }; connection.query("SELECT * from status", function (err, rows, fields) { ...

Ways to transfer variables between JavaScript files using a deferred function

I am encountering an issue while trying to retrieve a json object from another JS file. It appears to be a timing problem as the setTimeout function I added runs twice; first with the object correctly populated, and then again with the object becoming unde ...

Using media queries in VueJS style tags may not have the desired effect

I've encountered an issue with using @media in the style tags of a VueJS component. Surprisingly, styling within the @media query works consistently, while applying styles based on width rules does not seem to have any effect. <template> &l ...

Encountering SQLCODE=-313 error when utilizing prepared statements in DB2

Currently I am facing a problem where executing queries or inserts using prepared statement in node-jdbc sometimes results in the following error: DB2 SQL Error: SQLCODE=-313, SQLSTATE=07004 Upon researching this error code on IBMs website, it indicates: ...

Actions for HTML form submission to API through proxy link

Currently, the form is functioning properly with this setup <form method="POST" action='http://localhost:3000/newRecord'> However, my goal is to simplify the action attribute to just be action='/newRecord'. In React, I achieve ...

Transmitting a variable string from JavaScript to PHP through AJAX

How can I pass a variable value from an HTML page using JavaScript to PHP? In my index.php file, I have the following code: $amount = $_GET['pricenumb']; echo $amount; Here is the JavaScript code I used to call on click of a button and send th ...

The term 'sequelize' is missing its definition - it involves Sequelize and consign

Just starting out in the world of Node.js. I'm currently working on integrating Sequelize into a basic application with Consign. In my "config/db.js" file: var Sequelize = require('sequelize'); var sequelize = new Sequelize('test&ap ...

What is the best way to transform the pages extracted through the Notion API into slugs?

I'm new to Next.js and Notion API, and I want to create a blog site on my personal website using the Notion API. While I can easily pull the posts, I am facing a challenge in slugifying the endpoint IDs with post titles. When attempting this based on ...

Ways to retrieve the latest message from a particular discord channel

Struggling to retrieve the latest message from one channel by sending a command in another channel. I envision the process to be like this: Channel 1: (I enter) "Get last message of channel 2" Channel 2: Last message is ("Hello"); Channel 1: I receive th ...

Exploring Gatsby StaticQuery for Displaying HTML on the Page

I'm having difficulty understanding the behavior of <StaticContent>. If I turn off javascript in my application, anything enclosed within a <StaticContent> tag does not appear on the screen. Is this how it is supposed to work? Is there a ...

Using JavaScript to access array INDEX values sequentially

I have created a Stacked Bar chart using the Js library dhtmlx, and here is the generated output: The JSON data is structured as follows: var data = [ { "allocated":"20", "unallocated":"2", "day":"01/01/2014" }, { "allocated":"12", "unallocated": ...

Facing the Challenge: Overcoming Concurrency Issues with Promises

In the function "myMethod" within my "gulpfile.js", I aim to generate multiple Promises based on the size of an array passed as a parameter. It is crucial for all promises to be fulfilled before proceeding with any further actions upon calling this functio ...

Utilizing jQuery's AJAX method to redirect user upon button click

Just dipping my toes into the world of jQuery AJAX and I'm facing a conundrum. I need to redirect the user to another webpage upon clicking a button, but I can't just target the button directly due to some PHP file intricacies... Here's the ...

Ant Design is incompatible with React JS projects and cannot be effectively utilized

import React from 'react'; import styled from "styled-components"; import {Col, Row} from "antd"; const TitleBig = styled.div` font-family: "Bebas Neue Pro"; font-size: 20px; `; const TitleSmall = styled.div` ...

Calculate the total value of fields in the final stage of an aggregate MongoDB query

I have created an aggregation pipeline to connect Parent and Children Collections in order to gather related data. The goal is to calculate the total number of sodas all children have collectively. Using the projection stage, I am able to extract specific ...