Question

作为vuejs组件，我希望能够在输入字段旁边显示一个字符计数器。该字段最初使用prop（this.initialValue）设置。

当调用this.updateCounter方法时，输入文本字段被阻止：在字段中键入将不会更新其值。如果我没有设置maxlength prop，则该字段工作正常：我可以更新文本字段。

模板中的用法：

<textfield maxlength="50" name="title" initialValue="Test"></textfield>

以下是组件代码：

<template>
  <div class="input">
    <div class="input__field">
      <span class="input__limit f--small">{{ counter }}</span>
      <input type="text" :name="name" :maxlength="computedMaxlength" v-model="currentValue" />
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Textfield',
    props: {
      name: {
        default: ''
      },
      maxlength: {
        default: 0
      },
      initialValue: {
        default: ''
      }
    },
    computed: {
      hasMaxlength: function () {
        return this.maxlength > 0;
      },
      computedMaxlength: function () {
        if(this.hasMaxlength) return this.maxlength;
        else return false;
      },
      currentValue: {
        get: function() {
          return this.initialValue;
        },
        set: function(newValue) {
          this.updateCounter(newValue);
          this.$emit("change", newValue);
        }
      }
    },
    data: function () {
      return {
        counter: 0
      }
    },
    methods: {
      updateCounter: function (newValue) {
        if(this.maxlength > 0) this.counter = this.maxlength - newValue.length;
      }
    },
    mounted: function() {
      this.updateCounter(this.initialValue);
    }
  }
</script>

修改

我已经通过不使用v-model而是使用值和输入事件修复了我的问题。

data: function () {
      return {
        value: this.initialValue,
        counter: 0
      }
},
methods: {
      updateCounter: function (newValue) {
        if(this.maxlength > 0) this.counter = this.maxlength - newValue.toString().length;
      },
      onInput: function(event) {
        const newValue = event.target.value;

        this.value = newValue;
        this.updateCounter(newValue);

        this.$emit("change", newValue);
      }
},

输入字段预填充vuejs和反应字符计数

0 个答案: