vue forceUpdate v-on input in slots

vue-force-update-v-on-input.md

vue forceUpdate v-on input in slots

typescript

  computed: {
    inputEvents(): any {
      return {
        input: (e: { target: HTMLInputElement }) => {
          const value = e.target.value;
          const result = value.replace(/\D+/g, '');

          if (value !== result) {
            e.target.value = result;
          }

          this.$emit("input", result);
        },
      };
    }
  }

based on source vuejs/vue#10716 (comment)

This is working as expected: by filtering out letters before setting myNumericValue, this variable never changes and never triggers a re render, so the value on the input is preserved.

One way to get around this is to force update with this.$forceUpdate() after changing the value. A better way is to reset the input's value only:

const val = $event.target.value.replace(/[^\d]/g, ""); // strips letters, keeps numbers
      if (val === this.numericValue) $event.target.value = val
      else this.numericValue = val