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。据我所知，输入ID为driver-phone-number的非数字值应转换为普通字符串。但是，它只会让我短暂闪烁，输入字段的值没有任何反应。

Answer 1

这就是你想要的：

＆＃13;

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

＆＃13;

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

＆＃13;

Vue.js使用document.getElementById（'id'）设置输入值。值不起作用

1 个答案: