[Vuejs]-Input values not resetting – vuejs

by

2👍

✅

You missed binding on MainComponent

<level-01 
  :required="true"
  :v-model="datax.cardNumber"
  :value="datax.cardNumber"
 />

Note :value="datax.cardNumber" is correct
Second, in level-01 you do not bind value prop (not defined at all)

<template>
  <div class="c-floating-label">
    <input-number @input="passValue" :value="$attrs.value"/>
  </div>
</template>

<script>
  import InputNumber from '../../atoms/form-controls/BaseInput';
  export default {
    components: {
      InputNumber
    },
    methods: {
      passValue: function (value) {
        this.$emit('input', value);
      }
    }
  };
</script>

And finally BaseComponent:

<template>
  <input
    :value="$attrs.value"
    type="number"
    inputmode="numeric"
    @input="$emit( 'input', $event )"
  />
</template>

<script>
  export default {
    data () {
      return {
        // myValue: undefined
      };
    }
  }
 };
</script>

Leave a comment