How to apply input which has type number in Vue.js?

Question

I have made web apps using by Nuxt.js. I'm trying to apply for validation which excludes negative values and decimal points to all input tag(20~30) in same vue component. I think the way of injecting the validation rules to input tag on vue life-cycle mounted events goning to be success, but nothing change input tag.

<template>
・・・・・・・
<input
    type="number"
    style="width: 100%; box-sizing: border-box; text-align: right"
     v-model="item"
        />
・・・・・・・
</template>
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
@Component({})
export default class extends Vue {
   onNumbers = (val: any) => {
    return val.replace(/\D/g, '')
  }

  mounted() {
    document.querySelectorAll('input').forEach((item) => {
      item.addEventListener('input', (val) => {
        this.onNumbers(val)
      })
    })
  }
}
</script>

Does anyone advise me?

if you set the min property of the input tag to 0 first condition is met but i didn't understand second condition which is decimal points to all input tag(20~30). please bring an example — A Farmanbar
– A Farmanbar, Commented Feb 2, 2022 at 11:04

BWappsAndmore · Accepted Answer · 2022-02-02 13:33:11Z

1

In your input-tag set following properties to min="0" and step="1" and it should work.

<input
    type="number"
    min="0"
    step="1"
    style="width: 100%; box-sizing: border-box; text-align: right"
    v-model="item"
/>

answered Feb 2, 2022 at 13:33

BWappsAndmore

5314 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to apply input which has type number in Vue.js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related