亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

輸入值不重置 - vuejs

輸入值不重置 - vuejs

森欄 2023-07-20 15:08:02
我正在使用一個 2 級輸入字段組件。我想在父組件中單擊按鈕時重置。我試圖將數據傳遞到基本初始輸入字段,然后發送回父級。我的問題是,當我嘗試重置按鈕上的數據時,單擊父組件中的值它不起作用。數據未設置為 null,值仍為 123。我在下面的代碼中做錯了什么。任何幫助,將不勝感激?;据斎?lt;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>
查看完整描述

1 回答

?
守著一只汪

TA貢獻1872條經驗 獲得超4個贊

您錯過了 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>


查看完整回答
反對 回復 2023-07-20
  • 1 回答
  • 0 關注
  • 165 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號