vue前端測(cè)試開發(fā)watch如何監(jiān)聽data的數(shù)據(jù)變化

本篇內(nèi)容主要講解“vue前端測(cè)試開發(fā)watch如何監(jiān)聽data的數(shù)據(jù)變化”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“vue前端測(cè)試開發(fā)watch如何監(jiān)聽data的數(shù)據(jù)變化”吧!

watch監(jiān)聽data的數(shù)據(jù)變化

上一篇里提到了用elementUI的select實(shí)現(xiàn)了個(gè)遠(yuǎn)程搜索的功能，最終效果是這樣的。

但是繼續(xù)開發(fā)的時(shí)候，又遇到了一個(gè)新的問題，跟上面的功能有關(guān)。

先看下遠(yuǎn)程搜索的操作，與data里的數(shù)據(jù)關(guān)系。

• 當(dāng)輸入“張”進(jìn)行搜索，看到的下拉列表里展示的結(jié)果都是存放在data的options: []。

• 當(dāng)我選擇了一個(gè)，比如“張三”，因?yàn)閟elect框做了綁定v-model="user_value"，所以此時(shí)user_value有了對(duì)應(yīng)人員的值，存放的是id。

• 最后的ad_real_name是后加的，因?yàn)槲矣幸粋€(gè)接口要改動(dòng)，本來只要傳id的，現(xiàn)在還要多傳入個(gè)收貨人的姓名。

新問題

之前只傳id，做起來就很簡單，因?yàn)榻壎藆ser_value了，直接用就好了。
但是現(xiàn)在我需要把a(bǔ)d_real_name也傳過去，問題是我如何在user_value有值(id)的時(shí)候，把id對(duì)應(yīng)人的姓名賦給ad_real_named。

解決

我先試著同一個(gè)事件里面能不能調(diào)用2個(gè)方法，結(jié)果不太行。

再后來我就想到監(jiān)聽了，當(dāng)點(diǎn)擊了人員后，user_value此時(shí)被賦值，如果我監(jiān)聽這個(gè)字段，當(dāng)有值的時(shí)候，去把人名賦給ad_real_name即可。

接下來就是代碼實(shí)現(xiàn)了：

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

這個(gè)options是個(gè)列表，里面的元素是一個(gè)個(gè)對(duì)象{}，對(duì)象里就是key-value。之前只放了{(lán)value："", label: ""}，現(xiàn)在我要把a(bǔ)d_real_name也放進(jìn)去，變成{value："", label: "", ad_real_name: ""}。

2. 在監(jiān)聽里增加for循環(huán)和判斷

當(dāng)選擇了人員之后，此時(shí)for循環(huán)這個(gè)options，遍歷每一個(gè)對(duì)象。然后判斷當(dāng)對(duì)象里的value=選定的user_value，就把這個(gè)對(duì)象中的"ad_real_name"對(duì)應(yīng)值賦給data里的字段ad_real_name。

為了快速驗(yàn)證效果，在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:表示我要監(jiān)聽這個(gè)字段。

• function()：這里寫監(jiān)聽到變化后，要做的處理。

F12打開控制臺(tái)，目標(biāo)達(dá)成。

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

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

往后開發(fā)的時(shí)候發(fā)現(xiàn)還是有些問題，F(xiàn)12看了下，傳遞到接口的值ad_real_name還是null。

但是控制臺(tái)輸出這個(gè)字段又是有值的。于是我猜想，是不是事件觸發(fā)的太快了，也就是說ad_real_name其實(shí)還沒來得及賦上值，就發(fā)送后端請(qǐng)求了。

于是，我處理了下后端發(fā)送請(qǐng)求的方法，加了個(gè)延遲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()
},

成功解決。

到此，相信大家對(duì)“vue前端測(cè)試開發(fā)watch如何監(jiān)聽data的數(shù)據(jù)變化”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！