Vue中偵聽器watch時，呼叫this時出現undefined問題

阿新 • • 發佈：2018-11-19

watch偵聽器中，我們要將新的值賦給this.a出錯

watch: {
	value: (newV, oldV) => {
	this.a = newV;
	}
}

這裡報錯undefined，這裡錯誤的原因是不能寫成箭頭函式。寫成箭頭函式後，this會取上下文，而不是元件裡面的this了，正確寫法為：

watch: {
	value: function(newV, oldV) {
	this.a = newV;
	}
}

如下圖:
在這裡插入圖片描述
看考連結：https://cn.vuejs.org/v2/api/#watch
PS：好吧，雖然問題可以解決，但是具體為什麼不能寫成箭頭函式，講實話，我現在也不懂，知道原理的可以給我評論，非常感謝。

watch偵聽器中，我們要將新的值賦給this.a出錯 watch: { value: (newV, oldV) => { this.a = newV; } } 這裡報錯undefined，這裡錯誤的原因是不能寫成箭頭函式。寫成箭頭函式後，this會取上下文，而不是

1. 方法總和methods內的函式如何觸發？機制：methods內的函式和普通的函式沒有區別。觸發：methods內的函式執行的時候，才能觸發；注意：當頁面渲染的時候，也會執行下面程式碼中的methodsN函式；methods內的函式命名不能與data中的屬性重名。下面例項

偵聽器轉自：官網例子 https://cn.vuejs.org/v2/guide/computed.html#%E4%BE%A6%E5%90%AC%E5%99%A8 API https://cn.vuejs.org/v2/api/#watch 原因：專案開

相關 return compute 進行 names 變量使用 bsp 一個數一.方法method與計算屬性computed的區別方法method：每當觸發重新渲染時，調用方法method將總會再次執行函數；計算屬性computed：計算屬性computed是基

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body&g

MFC中CEdit多行情況下，呼叫GetLine()時，發現老是後面跟有亂碼。即使你把str初始化也是如此。對於採用GetLine（）呼叫，其函式說明有2種。 1.int GetLine( int nIndex, LPTSTR lpszBuffer ) co

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue中計算屬性，方法，偵聽器</title> <script

通過以下例子我們來做一個比較，請看程式碼： <div id="app"> {{fullName}}<br> {{fullName2()}}<br> {{fullName3}}<br> age:{

綁定 troy for dom 獲取數據初始 created 請求一次 vue實例和組件都有生命周期函數，beforeCreate()實例或組件沒有被創建的時候執行的鉤子函數；created()是實例或組件被創建完成的時候執行的鉤子函數；beforeMount()函數

Vue中的計算屬性和偵聽器 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue中的計算屬性和偵聽器</title> <!

<el-form-item label="油卡價格：" prop="petrolPrice"> <el-select v-model="priceForm.petrolPrice" placeholder="油卡價格">//監聽price

1、模板內的表示式非常便利，用於簡單的運算，但是，放入過多的邏輯運算就顯的笨重，難以維護。解決： 1.1模板中使用計算屬性。 <template> <p>{{ reversedMessage }}</p> </temp

調用處的復雜 original fir 分享圖片 class 組件一個計算屬性——介紹模板內的表達式非常便利，但是設計他們的初衷是用於簡單計算的。在模板中放入太多的邏輯會讓模板太過沈重切難以維護。如下： 1 <div id="example"> 2

形式否則偵聽器響應 lib family align code set 模板語法、計算屬性和偵聽器目標： 1、熟練使用vue的模板語法 2、理解計算屬性與偵聽器的用法以及應用場景 1. 模板語法 <div id="app"> <!-- 以

計算屬性模板內的表示式非常便利，但是在模板中放入太多的邏輯會讓模板過重切難以維護。對於任何複雜邏輯都應該使用計算屬性。 <p>{{ reverseMsg }}</> var vm = new Vue({ el: '#example',

計算屬性模板內的表示式非常便利，但是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。例如： <div id="example"> {{ message.split('').reverse().join('') }} </div&g

計算屬性：優先推薦，原因：既簡潔又效能高 <body> <div id="app"> {{fullName}} {{age}} </div> <script> var vm = new Vue({

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>計算屬性和偵聽器</title> <script src="./vue

提醒原帖完整收藏於IT老兵驛站，並會不斷更新。前言參考官網的這裡和中文版，總體學習一下計算屬性，感覺這一章節總體是比較簡單的，做一下筆記來進行總結。思路是，原文寫的很清楚的，只做簡單的概括；對原文存在疑問的地方，摘抄原文，列舉問題，總結概括。正文計算屬性

計算機屬性 <div id="example"> {{ message.split('').reverse().join('') }} </div> 在這個地方，模板不再是簡單的宣告式邏輯。你必須看一段時間才能意識到，這裡是想要顯示變數 message