输入值不重置 - 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&nbsp;&nbsp; :required="true"&nbsp; :v-model="datax.cardNumber"&nbsp; :value="datax.cardNumber"&nbsp;/>注意：value =“datax.cardNumber”是正确的其次，在level-01中你没有绑定value prop（根本没有定义）<template>&nbsp; <div class="c-floating-label">&nbsp; &nbsp; <input-number @input="passValue" :value="$attrs.value"/>&nbsp; </div></template><script>&nbsp; import InputNumber from '../../atoms/form-controls/BaseInput';&nbsp; export default {&nbsp; &nbsp; components: {&nbsp; &nbsp; &nbsp; InputNumber&nbsp; &nbsp; },&nbsp; &nbsp; methods: {&nbsp; &nbsp; &nbsp; passValue: function (value) {&nbsp; &nbsp; &nbsp; &nbsp; this.$emit('input', value);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; };</script>最后是 BaseComponent：<template>&nbsp; <input&nbsp; &nbsp; :value="$attrs.value"&nbsp; &nbsp; type="number"&nbsp; &nbsp; inputmode="numeric"&nbsp; &nbsp; @input="$emit( 'input', $event )"&nbsp; /></template><script>&nbsp; export default {&nbsp; &nbsp; data () {&nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; // myValue: undefined&nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; }&nbsp; }&nbsp;};</script>