Блог

У меня есть компонент поля ввода уровня 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>
  

Вы пропустили привязку к MainComponent

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

Примечание: значение =»datax.cardNumber» является правильным
Во-вторых, на уровне 01 вы не привязываете значение 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>