Vue.js Установка входного значения с помощью document.getElementById ('id'). Значение не работает

Question

Я использую Vue js и хочу ограничить ввод пользователя как нечисловой для определенного ввода.Поэтому я реализовал это, как показано ниже.

Метод

preventNonNumeric(id) {
            var value = document.getElementById(id).value;
            if (!(/^\d+$/.test(value))) {
                var newValue = value.replace(/\D/g, '');
                document.getElementById(id).value = newValue;
            }
        },

Шаблонная часть

<v-autocomplete v-digitsonly :auto-select-one-item=false :label="phoneNumber" :items="drivers" :get-label='getDriverLabel' :component-item='driverTemplate' :wait="0" :min-len="2" @update-items="loadDrivers" @item-selected="selectDriver" :input-attrs="{id: 'driver-phone-number'}" @focus="loadDriverType = 'phoneNumber'" @change="preventNonNumeric('phoneNumber')">
                                    </v-autocomplete>

преобразуется в

<div data-v-39f1041e="" class="v-autocomplete">
    <div class="v-autocomplete-input-group">
        <input type="search" id="driver-phone-number" class="v-autocomplete-input">
    </div>
</div>

v-autocomplete происходит от https://github.com/paliari/v-autocomplete. Насколько я понимаю, нечисловые значения на входе с идентификатором driver-phone-number должны быть преобразованы в обычную строку.Тем не менее, это только дает мне короткое мигание и ничего не происходит со значением поля ввода.

Answer 1

это то, что вы хотите:

const MyInput = {
  template: '#myInput',
  props: ['value'],
  data () {
    return {
      inputValue: this.value,
    }
  },
  methods: {
    emitValue(e) {
      this.inputValue = this.inputValue.replace(/\D/g, '');
      this.$emit('input', this.inputValue);					
    }
  }
}

var app = new Vue({
  el: '#app',
  components: {MyInput},
  data () {
    return {
      val: 5
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <my-input v-model="val"></my-input>
</div>

<script type="text/x-template" id="myInput">
  <input v-model="inputValue" @input="emitValue($event)"/>
</script>