Vue watch 監聽手機號輸入完畢后請求數據

Bac: 需要在用戶輸入手機號之后，調用后台接口去獲取對應該手機號的數據情況

思路是：監聽用戶輸入手機號，當輸入的手機號長度 = 11 的時候，此時再去請求接口。

在這里監聽學習到了兩種方式：

一、watch 監聽 計算屬性的值

watch:{
          customerMobile (val, oldval) {
            if (val.length === 11) {
              this.handleCustomerChange(val)
            }
            // clearTimeout(this.timeout)
            //   this.timeout = setTimeout(() => {
            //     this.handleCustomerChange(val)
            //   }, 500)
          }
        },
 computed : {
          customerMobile () {
            return this.addForm.mobile
          }
    },

　　methods: {

          // 輸入手機號，客戶名稱聯系人聯動

          handleCustomerChange(){

            this.$http.get(`${window.SITE_CONFIG['baseURL']}/presale/presalelist/getDataByMobile`,

            {

              params:{

                mobile: this.addForm.mobile

              }

            })

            .then(data => {

              if (data.result.code === 0){

                this.addForm.username = data.result.data.customerName

                this.addForm.linkman = data.result.data.name

              } else {

                this.$message({

                  message: data.result.msg,

                  type: 'error',

                  duration: 1500

                })

              }

            })

          }

}

二、watch直接監聽某個對象的屬性

watch:{
          'addForm.mobile' : function(val, oldval){
              if (val.length === 11) {
              this.handleCustomerChange(val)
            }
          }
       },