技術標籤：vue

如題

需求：

• 將input 限制在 1-99 之間

子元件向父元件傳送資料

//子元件文字框
<input type="text" class="num" :value="item.num" @blur="changeNum(item.id,$event)" maxlength="2"/>
//maxlength="2" 將資料限制在兩個字元內,初步限制不會超過99
//向父元件傳遞資料
methods: {
          changeNum(
 
id, $event) {
            this.$emit('change-num', {
              id,
              num: $event.target.value,
              type: 'change',
            });
          },
		}

父元件對資料的處理

//子元件的使用
<shop-cart-list :list="list" @list-del="listDel($event)" @change-num="changeNum($event)"
 
></shop-cart-list>

//對資料的處理
methods: {
          changeNum(val) {
            if (val.type == 'change') {
              this.list.find((item) => {
                if (item.id === val.id) {
                  //將資料進行了處理,不能為非數字或者 <= 0，如果是就賦值為 1
                  val.num > 0 ? val.num : (val.
 
num = 1);
                  //解決方案就是將父元件的資料進行改變，在重新賦值，資料改變，頁面重新更新
                  val.num == item.num ? (item.num = 999) : '';
                  this.$set(item, 'num', val.num);
                }
              });
            }
          }
      	}

大致思路：
當子元件連續多次傳遞非法的資料,會導致子元件的資料和父元件的資料一致，資料不變化頁面不更新，而我的頁面沒有使用v-model進行雙向繫結，而是使用的:value來控制頁面的資料顯示，所以頁面顯示的是當前輸入的非法資料，沒有改變。