From fe3e3b5206eae0491fe21ddbf00c319544cde589 Mon Sep 17 00:00:00 2001 From: ktsn Date: Thu, 2 Mar 2017 01:38:45 +0900 Subject: [PATCH 1/3] update readme for caveats of class properties --- README.md | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/README.md b/README.md index f0edef5..a5b4be7 100644 --- a/README.md +++ b/README.md @@ -159,6 +159,39 @@ new Vue({ }) ``` +### Caveats of Class Properties + +vue-class-component corrects class properties as Vue instance data by instantiating the original constructor under the hood. While we can define instance data like native class manner, we sometimes need to know how it works. + +For example, if you define an arrow function as a class property and access `this` in it, it will not work. This is because `this` is just a proxy object to Vue instance when initializing class properties: + +```js +@Component +class MyComp extends Vue { + foo = 123 + + bar = () => { + // Does not update the expected property. + // `this` value is not a Vue instance in fact. + this.foo = 456 + } +} +``` + +You can simply define a method instead of a class property in that case: + +```js +@Component +class MyComp extends Vue { + foo = 123 + + bar () { + // Correctly update the expected property. + this.foo = 456 + } +} +``` + ### Build the Example ``` bash From c6629e5d5075ce16e585e405277fd17f2a3ca2a6 Mon Sep 17 00:00:00 2001 From: ktsn Date: Thu, 2 Mar 2017 01:54:50 +0900 Subject: [PATCH 2/3] add description vue will bind methods --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index a5b4be7..beeb4a9 100644 --- a/README.md +++ b/README.md @@ -178,7 +178,7 @@ class MyComp extends Vue { } ``` -You can simply define a method instead of a class property in that case: +You can simply define a method instead of a class property in that case because Vue will bind the instance automatically: ```js @Component From ad2fe518a2711d359cc9001d26ea7df427b16374 Mon Sep 17 00:00:00 2001 From: ktsn Date: Fri, 3 Mar 2017 00:43:55 +0900 Subject: [PATCH 3/3] Fix typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index beeb4a9..27fbf6d 100644 --- a/README.md +++ b/README.md @@ -161,7 +161,7 @@ new Vue({ ### Caveats of Class Properties -vue-class-component corrects class properties as Vue instance data by instantiating the original constructor under the hood. While we can define instance data like native class manner, we sometimes need to know how it works. +vue-class-component collects class properties as Vue instance data by instantiating the original constructor under the hood. While we can define instance data like native class manner, we sometimes need to know how it works. For example, if you define an arrow function as a class property and access `this` in it, it will not work. This is because `this` is just a proxy object to Vue instance when initializing class properties: