如何应用 Vue.js 中类型编号的输入？

Question

我使用 Nuxt.js 制作了网络应用程序。我正在尝试为同一 vue 组件中的所有输入标签（20~30）申请排除负值和小数点的验证。我认为将验证规则注入到 vue 生命周期安装事件上的输入标签的方法将会成功，但没有任何改变输入标签。

<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>

有人给我建议吗？

Answer 1

在您的 input 标签中，将以下属性设置为 min="0" 和 step="1"，它应该可以工作。

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

如何应用 Vue.js 中类型编号的输入？

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

html

javascript

vue.js

nuxt.js