[Vuejs]-How to add text to user input – Vue

by

1👍

✅

This is because you set your input type to number. so you can only use number.

But if you want to force user to enter only number, you can do this:

<div id="app">
  <input type="text" :placeholder="placeholderPrice" v-model="price" @keypress="mustNumber"/>
  <div class="price">
    <p v-if="price !== ''">
    </p>
    {{ price }}
  </div>
</div>

new Vue({
  el: "#app",
  data: {
    price: "£",
  },
  methods: {
        inputPrice(e) {
        this.price = `£${e.target.value}`;
    },
    mustNumber($event) {
            let keyCode = $event.keyCode ? $event.keyCode : $keyCode;

            // only allow number and one dot
            if (
                (keyCode < 48 || keyCode > 57) &&
                (keyCode !== 46)
            ) {
                $event.preventDefault();
            }
        }
  }
})
👤BeHappy

2👍

Hi Daniel I think you might need to change type=”number” to text to allow you to use a non numeric value

👤Jev Prentice

0👍

You need masked input. For example you can use https://vuejs-tips.github.io/v-money/ library

<template>
  <div>
    <money v-model="price" v-bind="money"></money> {{price}}
  </div>
</template>

<script>
  import {Money} from 'v-money'

  export default {
    components: {Money},

    data () {
      return {
        price: 123.45,
        money: {
        decimal: ',',
        thousands: '.',
        prefix: '£ ',
        suffix: '',
        precision: 2,
        masked: false
      }
      }
    }
  }
</script>
👤Alexey Istomin

Leave a comment