Question

173

How to limit digit number in vue input?

rated 0 times [ 174] [ 1] / answers: 1 / hits: 44948 / 5 Years ago, wed, may 8, 2019, 12:00:00

My goal is to limit the number of digit user can enter in the input field. So a user can only input 10 digits. I tried min and max still doesn't work

Here's the code

        <input

          v-model=amount

          type=number

        >





        <script>

             export default {

                  data() {

                      return { 

                          amount: 7800

                      }

                   }



              }



        </script>

Right now i can add more than 10 digits

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

chase

Add To Favorites

Follow

Total Points: 78

Total Questions: 106

Total Answers: 93

Location: Comoros

Member since Tue, Mar 14, 2023

1 Year ago

chase questions

1 How to set the download file extension for blob data

Thu, Mar 31, 22, 00:00, 2 Years ago

1 React changing react-icon color on mouse hover

Thu, Jul 1, 21, 00:00, 3 Years ago

1 Passing Objects as Argument to GraphQL Mutation (graphql-request)

Sun, Dec 20, 20, 00:00, 3 Years ago

1 how to get data from response from fetch javascript request

Sat, Dec 12, 20, 00:00, 4 Years ago

1 CSS select all previous siblings for a star rating

Mon, Sep 14, 20, 00:00, 4 Years ago

View All

answered 5 Years ago cristinah · Accepted Answer

We can control the value of <input> manually:

 <input

  type=number

  :value=amount

  @input=updateValue

/>

and check in updateValue method:

  data() {

    return {

      amount: 7800

    }

  },

  methods: {

    updateValue(event) {

      const value = event.target.value

      console.log(value, this.amount)

      if (String(value).length <= 10) {

        this.amount = value

      }

      this.$forceUpdate()

    }

  }

Note that this.$forceUpdate() is used to make component re-render when user input more than 10 characters.

Demo on Codepen