[Vuejs]-How to restrict user to enter only 30 characters in Vuejs?

by

0👍

✅

I had done something similar in the past, so I built on that component (plus some research) to build this component that solves the problem.

    <template>
      <div class="input-max">
        <div class="form-row">
            <div class="col-md-8">
              <input class="form-control" type="text" placeholder="Address"
                v-model="address" @keyup="updateAddress">
            </div>
            <div class="col-md-4">
              <span v-if="displayWarning" class="error-msg">* You can only enter {{ maxLength }} characters</span>
            </div>
        </div>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            address: '',
            previousAddress: '',
            maxLength: 30,
            displayWarning: false
          }
        },
        methods: {
          updateAddress(event) {
            let newValue = event.target.value;
            if (newValue.length > this.maxLength) {
              event.preventDefault()
              this.address = this.previousAddress;
              this.displayWarning = true;
            }
            else {
              this.address = newValue;
              this.previousAddress = newValue;
              this.displayWarning = false;
            }
          }
        }
      }
    </script>

<style scoped>
  .error-msg {
    color: red;
  }
</style>

Leave a comment