vue前端測試開發watch監聽data的資料變化

2022-05-31 22:00:12

watch監聽data的資料變化

上一篇裡提到了用elementUI的select實現了個遠端搜尋的功能，最終效果是這樣的。

但是繼續開發的時候，又遇到了一個新的問題，跟上面的功能有關。

先看下遠端搜尋的操作，與data裡的資料關係。

當輸入“張”進行搜尋，看到的下拉選單裡展示的結果都是存放在data的options: []。
當我選擇了一個，比如“張三”，因為select框做了繫結v-model="user_value"，所以此時user_value有了對應人員的值，存放的是id。
最後的ad_real_name是後加的，因為我有一個介面要改動，本來只要傳id的，現在還要多傳入個收貨人的姓名。

新問題

之前只傳id，做起來就很簡單，因為繫結了user_value了，直接用就好了。
但是現在我需要把ad_real_name也傳過去，問題是我如何在user_value有值(id)的時候，把id對應人的姓名賦給ad_real_named。

解決

我先試著同一個事件裡面能不能呼叫2個方法，結果不太行。

再後來我就想到監聽了，當點選了人員後，user_value此時被賦值，如果我監聽這個欄位，當有值的時候，去把人名賦給ad_real_name即可。

接下來就是程式碼實現了：

1. 先把姓名的值，也加到options裡

這個options是個列表，裡面的元素是一個個物件{}，物件裡就是key-value。之前只放了{value："", label: ""}，現在我要把ad_real_name也放進去，變成{value："", label: "", ad_real_name: ""}。

2. 在監聽裡增加for迴圈和判斷

當選擇了人員之後，此時for迴圈這個options，遍歷每一個物件。然後判斷當物件裡的value=選定的user_value，就把這個物件中的"ad_real_name"對應值賦給data裡的欄位ad_real_name。

為了快速驗證效果，在console里加了log列印。最終的程式碼是：

watch: {
    user_value:function() {
        for (let i=0; i<this.options.length; i++) {
            if (this.options[i]['value'] === this.user_value) {
                this.ad_real_name = this.options[i]['ad_real_name'];
                console.log("列印this.ad_real_name", this.ad_real_name)
            }
        }
    }
},

user_value:表示我要監聽這個欄位。
function()：這裡寫監聽到變化後，要做的處理。

F12開啟控制檯，目標達成。

或許還有別的更快捷的方法，但是畢竟我是前端小白，快速解決問題為首要，如果大佬們有更好的寫法建議，還請不吝賜教。

-----------------2021-05-25------------更-------------

往後開發的時候發現還是有些問題，F12看了下，傳遞到介面的值ad_real_name還是null。

但是控制檯輸出這個欄位又是有值的。於是我猜想，是不是事件觸發的太快了，也就是說ad_real_name其實還沒來得及賦上值，就傳送後端請求了。

於是，我處理了下後端傳送請求的方法，加了個延遲500ms。

getReceiveOperatorToken() {
    setTimeout(() => {
        this.$axios.post('/api/receiveGoodsQuickly/getReceiveOperatorToken', {
            'sm_admin_id': this.user_value,
            'receive_wh_id': this.receive_wh_id,
            'ad_real_name': this.ad_real_name,
            'mchid': 6001
        }).then((response) => {
            if (response.data['code'] === 0) {
                this.receive_operator_token = response.data['content'];
                this.$message({
                    type: 'success',
                    message: '收貨人token獲取成功'
                })
            } else {
                this.$message({
                    type: 'warning',
                    message: response.data['errormsg'],
                });
            }
        })
    }, 500); // 用setTimeout()
},

成功解決。

以上就是vue測試開發watch監聽data的資料變化的詳細內容，更多關於vue測試watch監聽data資料的資料請關注it145.com其它相關文章！

vue前端測試開發watch監聽data的資料變化

目錄

watch監聽data的資料變化

新問題

解決

1. 先把姓名的值，也加到options裡

2. 在監聽裡增加for迴圈和判斷

熱門文章