[Vuejs]-Vue.js Setting input value using document.getElementById('id').value does not work

by

0👍

this is what your want：

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>

Leave a comment