输入值未重置 - vuejs

Question

我有一个正在使用的 2 级输入字段组件。我想从父组件单击按钮重置。我正在尝试将数据传递给基本初始输入字段，然后发送回父级。

我的问题是，当我尝试重置按钮上的数据时，单击父组件中的值不起作用。 数据未设置为 null，值保持为 123。

我在下面的代码中做错了什么。

任何帮助将不胜感激。

基本输入

<template>
  <input
    v-model="myValue"
    type="number"
    inputmode="numeric"
    @input="$emit( 'input', $event.target.value )"
  />
</template>

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

01级

<template>
  <div class="c-floating-label">
    <input-number @input="passValue" />
  </div>
</template>

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

主要组件

<div>
  <level-01 
    :required="true"
    :v-model="datax.cardNumber"
    value="datax.cardNumber"
   />
 <button @click="reset">click me</button>
</div>
<script>
   data () {
      return {
        datax: {
          cardNumber: undefined
        }
      };
    },
   created() {
      this.datax.cardNumber = 123;
    },
    methods: {
      reset () {
        this.datax.cardNumber = null;
      },
</script>

Answer 1

您错过了 MainComponent 上的绑定

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

注意：value="datax.cardNumber" 是正确的 其次，在 level-01 中你没有绑定 value prop（根本没有定义）

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

最后是 BaseComponent：

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

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