Preventing input of specific numbers in vue.js

Utilizing vue.js, I have implemented an input field with the following logic: 

onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57"
. This setup restricts input to only digits ranging from 0 to 9. Within my vue component's data(), I have declared limitMin: 20 and I would like to integrate this into the input validation. Therefore, if limitMin: 20 is set, only numbers above 20 should be allowed in the input field.

<input
 type="number"
 :min="this.limitMin"
 onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57">
javascriptvue.js

Answer №1

One possible solution is shown below:

new Vue({
  el: "#app",
  data: {
    inputValue: 1,
    limitMin: 20
  },
  methods: {
    validate: function() {
      if (this.inputValue >= this.limitMin) {
        this.inputValue = this.limitMin;
      }
    }
  }
});
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2751524267150912091610">[email protected]</a>/dist/vue.js"></script>

<div id="app">
  <input
    type="number"
    v-model="inputValue"
    @input="validate">
</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

Using the HTTP DELETE method in Node.js

Is there a specific configuration required before sending DELETE requests to a node.js application? I am able to send GET, POST, and PUT requests successfully, but for some reason DELETE requests are not functioning. When I try DELETE http://localhost:80 ...

javascriptnode.jshttprestexpress

The rule 'import/no-cycle' definition could not be located

After removing my npm package along with the package.lock.json file, I proceeded to run 'npm install' and followed up with 'npm update'. However, upon starting my application using 'npm run start', an error occurred. Upon lau ...

javascriptreactjsgithubnpmeslint

What is the best way to conceal an image tag depending on an ajax response?

What is the correct jQuery statement to replace the "//Needed incantation" comments below so that the image tags are displayed or hidden based on the AJAX responses? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR ...

javascriptjquery

Using Selenium Webdriver with C# to dynamically expand a RadMenu Webelement in Javascript

I am currently working with Selenium WebDriver in C# and facing an issue with a RadMenu. My goal is to hover over the menu so that it expands a sub menu, where I can find a specific webelement to click. I have tried using JavaScript for this purpose, but u ...

javascriptc#selenium-webdriverradmenu

Building a node.is script to validate email addresses

This code snippet is for validating email addresses. I have successfully implemented example 5, where the email length must be over 5 characters to avoid errors and prompt users to re-enter their email address. However, I am unsure how to handle examples ...

javascriptnode.jssubstringemail-validation

How to correctly initialize MaterializeCSS in a VueJS Project

I am attempting to initialize the MaterializeCSS framework without the use of jQuery in a VueJS project that was set up using npm (vue init webpack projectname) Starting from version 1.0.0-rc.2, Materialize now offers support for its own initialization wi ...

vue.jsmaterialize

Choose only one option from the dropdown menu at a time within the specified div

I attempted to utilize the "setSelected" option on my multiselect feature, but I noticed that it does not function with div elements (at least I could not make it work myself). I am endeavoring to create two synchronized multiselects using this example: b ...

javascriptbootstrap-4bsmultiselect

Learning to Implement Vue Transitions with Conditional Rendering: v-if/else

I have structured my components as follows: <component-1 v-if="this.showData" ></component-1> <component-2 v-else ></compoment-2> I am interested in adding a transition around each compo ...

vue.jsvuejs2vue-transitions

Is it possible to utilize AJAX to fetch code from a separate file, view, or page in order to create an experience akin to a single-page application

Essentially, I'm aiming to create a simplified version of a Single Page Application within the admin panel of my website. The idea is to organize the information by using tabs, making the panel less cluttered. Here's a rough layout of what I have ...

javascriptjqueryajax

Inaccurate data saved to a cookie

I attempted to assign a string from PHP to a cookie and retrieve the value of that cookie using JavaScript. Take a look at my code snippet: <php $date=date('Y',time()); //assume it is 2017 setcookie("Year", $date, time() + 3600, "/"); ?> ...

javascriptphp

Send a file using ajax with the help of JavaScript and PHP

Currently, I am looking to implement a method for uploading files using Ajax and JavaScript/PHP without having the page refresh. My initial thought is to use Ajax to send the file using xmlhttp.send(file) and then retrieve it in the PHP script, but I' ...

javascriptphpajax

Tips on finding the most budget-friendly item in a Vue array

I'm working with an array called item.warehouse_positions that contains various prices and IDs. I want to display only one item.id with the lowest price. How can I achieve this? <div v-for='(item, index) in item.warehouse_positions' :key= ...

javascriptvue.jsvuejs2

parsing a TypeScript query

Is there a simpler way to convert a query string into an object while preserving the respective data types? Let me provide some context: I utilize a table from an external service that generates filters as I add them. The challenge arises when I need to en ...

javascripttypescriptqs

Verify if the user has admin privileges using Vue Router and Vuex

I am currently developing an application which features an admin section. Users are categorized as either admin or non-admin in the database by: admin = 1 The data is fetched using axios and then the user's state is set using vuex. However, I am fac ...

vue.jsvuexvue-router

Headers cannot be reset after being sent while attempting to log in a user

I'm very puzzled at the moment, as I'm utilizing bcrypt to authenticate a user login and encountering an unexpected error: Error: Can't set headers after they are sent. Let me share with you the code snippet for that particular route: rou ...

javascriptexpressbcrypt

Having trouble with sending an AJAX request to a different domain?

I've been attempting to utilize the following API: However, upon making an AJAX call, I encounter this specific error: XMLHttpRequest cannot load /radius.json/30341/10/mile. No 'Access-Control-Allow-Origin' header is present on ...

javascriptjqueryajax

Issues with the drop-down menu in the <s:select> element arise when attempting to set the

While utilizing a Map to populate the Struts2 tag <s:select >, I have noticed that when the form is submitted multiple times, a blank line is added at the end of the list. For example, if the Map contains 2 key-value pairs, it displays 3 records and ...

javascripthtmlformsjspstruts2

Returning to the previous page

Having some trouble navigating back to the previous page. When I click the cancel button, it runs a function that uses history.back();, which works correctly. However, there is a validation on the page, so it checks all fields before navigating back. I&ap ...

javascriptjquerydevextreme

Bringing packages from around the world into your Node.js project

In my node.js application, I have several modules where I find myself importing the same package (e.g. moment npm). I'm curious if there is a more efficient way to handle imports by centralizing all dependencies in one place and using them as global ...

javascriptnode.js

After the "div" tag comes the magic of AJAX, PHP, and JAVASCRIPT, replacing

My Ajax implementation is successfully displaying the selected content on a div, but unfortunately, everything that comes after the div is getting replaced by this output. I am unsure of why this is happening and how to resolve it. If you have any insigh ...

javascriptphpjqueryhtmlajax