快捷導(dǎo)航

vue?watch中如何獲取this.$refs.xxx節(jié)點(diǎn)

更新時(shí)間：2022年08月12日 09:29:50 作者：A黃俊輝A

這篇文章主要介紹了vue?watch中獲取this.$refs.xxx節(jié)點(diǎn)的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

1.在配置路由并引入組件后,報(bào)錯(cuò)
2.在組件中的標(biāo)簽和樣式中圖片路徑出錯(cuò)時(shí),報(bào)錯(cuò)
3.在組件中標(biāo)簽沒(méi)有閉合，報(bào)錯(cuò)
4.在使用less定義變量時(shí)報(bào)錯(cuò)
本地開(kāi)發(fā)環(huán)境請(qǐng)求服務(wù)器接口跨域的問(wèn)題

watch中獲取this.$refs.xxx節(jié)點(diǎn)

項(xiàng)目中要在watch中使用refs操作dom對(duì)象，因?yàn)槲覀兊膚atch是監(jiān)聽(tīng)特性，會(huì)使用時(shí)，this.refs是undefined，所以我們的解決辦法是 this.$nextTick()來(lái)幫忙解決

這里解釋了為什么 watch中無(wú)法得到 dom 對(duì)象的變化

vue常見(jiàn)錯(cuò)誤及解決辦法

1.在配置路由并引入組件后,報(bào)錯(cuò)

Unknown custom element: <router-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

錯(cuò)誤原因：vue-router沒(méi)有注冊(cè)

解決辦法：

//注冊(cè)插件 *****************非常重要，不能忘記

Vue.use(VueRouter)

2.在組件中的標(biāo)簽和樣式中圖片路徑出錯(cuò)時(shí),報(bào)錯(cuò)

Errors while compiling. Reload prevented.

Module not found: Error: Can't resolve './src/assets/img/btn_bg.png' in 'E:\myStudy\vue案例\chexian-spa\src\components'

解決辦法：

將圖片的路徑重新書(shū)寫(xiě)

3.在組件中標(biāo)簽沒(méi)有閉合，報(bào)錯(cuò)

Errors while compiling. Reload prevented.

./node_modules/_vue-loader@13.4.0@vue-loader/lib/template-compiler?{"id":"data-v-00822b28","hasScoped":false,"buble":{"transforms":{}}}!./node_modules/_vue-loader@13.4.0@vue-loader/lib/selector.js?type=template&index=0&bustCache!./src/components/BaseProject.vue

(Emitted value instead of an instance of Error)

解決辦法：

檢查html代碼

4.在使用less定義變量時(shí)報(bào)錯(cuò)

錯(cuò)誤原因：必須用分號(hào)結(jié)尾：@imgUrl:'../../assets/img/';

Compiled with problems:

編譯問(wèn)題

C:\myel\src\views\HomeView.vue

錯(cuò)誤出現(xiàn)文件

3:1 error Mixed spaces and tabs no-mixed-spaces-and-tabs

4:1 error Mixed spaces and tabs no-mixed-spaces-and-tabs

第3行的第一個(gè)字符

第4函的第一個(gè)字符

Mixed spaces and tabs

錯(cuò)誤原因：混合的空格與tab

no-mixed-spaces-and-tabs

錯(cuò)誤規(guī)則： no-mixed-spaces-and-tabs 不準(zhǔn)混空格與tab

2 problems (2 errors, 0 warnings)
2個(gè)問(wèn)題（2個(gè)錯(cuò)誤，0個(gè)警告）

Compiled with problems:

編譯錯(cuò)誤

ERROR in ./src/views/HomeView.vue?

錯(cuò)誤出現(xiàn)的位置

Unexpected keyword 'const'. (6:0)

第6行第0個(gè)字符有個(gè)不應(yīng)該出現(xiàn)的關(guān)鍵字 const

63 | const user = reactive({ userid: "", pwd: "", code: "" }), | ^ 64 | const rules = reactive({ | ^ 65 | userid: [

第63到64行兩個(gè)^之間有錯(cuò)誤

ERROR in ./src/router/index.ts 10:19-57

錯(cuò)誤發(fā)生在 ./src/router/index.ts 第10行第19個(gè)字符到57字符

Module not found: Error: Can't resolve '../views/admin/AdminVeiw.vue' in 'C:\myel\src\router'

，模塊找不的不能resolve（兌現(xiàn)，發(fā)現(xiàn)，解決）../views/admin/AdminVeiw.vue

在C:\myel\src\router

總結(jié)：文件../views/admin/AdminVeiw.vue（文件名/路徑發(fā)生錯(cuò)誤）

本地開(kāi)發(fā)環(huán)境請(qǐng)求服務(wù)器接口跨域的問(wèn)題

上面的這個(gè)報(bào)錯(cuò)大家都不會(huì)陌生，報(bào)錯(cuò)是說(shuō)沒(méi)有訪問(wèn)權(quán)限（跨域問(wèn)題）。本地開(kāi)發(fā)項(xiàng)目請(qǐng)求服務(wù)器接口的時(shí)候，因?yàn)榭蛻舳说耐床呗?，?dǎo)致了跨域的問(wèn)題。

下面先演示一個(gè)沒(méi)有配置允許本地跨域的的情況：

可以看到，此時(shí)我們點(diǎn)擊獲取數(shù)據(jù)，瀏覽器提示我們跨域了。所以我們?cè)L問(wèn)不到數(shù)據(jù)。

那么接下來(lái)我們演示設(shè)置允許跨域后的數(shù)據(jù)獲取情況：

注意：配置好后一定要關(guān)閉原來(lái)的server，重新npm run dev啟動(dòng)項(xiàng)目。不然無(wú)效。

我們?cè)?出設(shè)置了允許本地跨域，在2處，要注意我們?cè)L問(wèn)接口時(shí)，寫(xiě)的是/api，此處的/api指代的就是我們要請(qǐng)求的接口域名。

如果我們不想每次接口都帶上/api，可以更改axios的默認(rèn)配置axios.defaults.baseURL = '/api';這樣，我們請(qǐng)求接口就可以直接this.$axios.get('app.php?m=App&c=Index&a=index')，很簡(jiǎn)單有木有。此時(shí)如果你在network中查看xhr請(qǐng)求，你會(huì)發(fā)現(xiàn)顯示的是localhost:8080/api的請(qǐng)求地址。

這樣沒(méi)什么大驚小怪的，代理而已：