Question

<script>
export default {
  name: "Register",
  props: {
    msg: String,
  },
};
</script>

-------------main.js---------------

new Vue({
data:{
max:30,
text:''
},
render:h => h(App),
}).$mount('#app'

<template>
  <div class="pop-up-mask">
    {{ msg }}
    <div class="pop-up">
    <input type="text" class="input-section" 
           placeholder="Enter your Name" :maxlength="max" v-model="text" />
           </div>
</template>

如果用户尝试输入超过 30 个字符，用户应该收到错误消息：you can only enter 30 characters。尝试使用上述逻辑，例如 maxlength="max" v-model="text"

Answer 1

我过去做过类似的事情，所以我基于那个组件（加上一些研究）来构建这个解决问题的组件。

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

如何限制用户在 Vuejs 中只能输入 30 个字符？

1 个答案: