解決Vue watch里調(diào)用方法的坑
這里是說watch調(diào)用methods里方法的時候,頁面經(jīng)常會報找不到方法
這個時候一定要在watch里去輸出一下this,
看看this包裹的殼是不是多了好多層,所以找不到方法,雖然我到現(xiàn)在還沒理解為啥有時候會出現(xiàn)一層或幾層殼的問題。
例如
正常情況下用this.functionname()就可以調(diào)用了。
但是在一些情況下(現(xiàn)在本人還沒找到原因)在控制臺輸出this的時候你會發(fā)現(xiàn)數(shù)據(jù)經(jīng)常是這樣包裹的a{name},name里面對你的methods還包裹了一層,所以使用方法的時候就會變成 this.a.methods.funtionname()
原因還在找,不過解決辦法先記下來。
補充知識:使用 Vue 的最佳做法---不要在“created”和“watch”中調(diào)用方法
我就廢話不多說了,大家還是直接看代碼吧~
watch: { params: {handler: function (val, oldVal) { if (val == ’1’) { this.initTableData() }},deep: true }, property: {immediate: true,handler: function (val, oldVal) { this.initTableData()}, }, },
Vue開發(fā)人員經(jīng)常犯的一個錯誤是他們不必要地在created和watch中調(diào)用方法。 其背后的想法是,我們希望在組件初始化后立即運行watch。
// 不好的做法 created: () { this.handleChange() }, methods: { handleChange() { // stuff happens } }, watch () { property() { this.handleChange() } }
但是,Vue為此提供了內(nèi)置的解決方案,這是我們經(jīng)常忘記的Vue watch屬性。
我們要做的就是稍微重組watch并聲明兩個屬性:
1.handler (newVal, oldVal)-這是我們的watch方法本身。
2. immediate: true- 代表如果在 wacth 里聲明了之后,就會立即先去執(zhí)行里面的handler方法,如果為 false就跟我們以前的效果一樣,不會在綁定的時候就執(zhí)行
// 好的做法methods: { handleChange() { // stuff happens }},watch () { property { immediate: true handler() { this.handleChange() } }}
以上這篇解決Vue watch里調(diào)用方法的坑就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. css進階學(xué)習(xí) 選擇符2. Docker 啟動Redis 并設(shè)置密碼的操作3. PHP循環(huán)與分支知識點梳理4. java不解壓直接讀取壓縮包中文件的實現(xiàn)方法5. vue使用exif獲取圖片經(jīng)緯度的示例代碼6. java中Servlet監(jiān)聽器的工作原理及示例詳解7. ASP.NET Core按用戶等級授權(quán)的方法8. ThinkPHP5 通過ajax插入圖片并實時顯示(完整代碼)9. JSP實現(xiàn)文件上傳功能10. 解決python腳本中error: unrecognized arguments: True錯誤
