I'm using VueJS (vue 2) and Vuetify I have a input type "number" that allows letter "e" and "-" (normal behaviour in HTML)

What I want is to .replace('e', '') in my input

<v-text-field
            ref="Invoice"
            v-model="invoice"
            label="Invoice Number"
            required
          ></v-text-field>

What is the best way of doing this?

CodePudding user response：

Try computed property with getter and setter:

<v-text-field
     ref="Invoice"
     v-model="invoice"
     label="Invoice Number"
     required
 ></v-text-field>

<script>
 export default {
   data() { return { invoiceNumber: 0 } },

   computed: {
     invoice: {
       get() {
         return this.invoiceNumber
       },
       set(value) {
         this.invoiceNumber = value.replace() // your code here
       }
     }
   }
 }
</script>

CodePudding user response：

You can use watcher:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    invoice: null
  }),
  watch: {
    invoice(newValue) {
      this.invoice = newValue.replaceAll(/e/g, '')
    },
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-text-field
            ref="Invoice"
            v-model="invoice"
            label="Invoice Number"
            required
          ></v-text-field>
          {{invoice}}
      </v-container>
    </v-main>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>