Styjun

What is the point of impeaching Trump?

How do we decide/plan an SLA for an NP-hard optimization process running in production?

Should I be an author on another PhD student's paper if I went to their meetings and gave advice?

Missing quartile in boxplot

Duck, duck, gone!

Does the US Armed Forces refuse to recruit anyone with an IQ less than 83?

麦酒 (ばくしゅ) for "beer"

Why do personal finance apps focus on outgoings rather than income

Wondering why they used ultrafast diodes in a 50 or 60Hz bridge?

Can a passenger predict that an airline or a tour operator is about to go bankrupt?

GPLv3 forces us to make code available, but to who?

The answer is a girl's name (my future granddaughter) - can anyone help?

Is there anything on the ISS that would be destroyed if that object were returned to Earth?

Re-entering the UK after overstaying in 2008

Disable all sound permanently

Job interview by video at home and privacy concerns

How to interpret the challenge rating of creatures?

IEEE 754 square root with Newton-Raphson

Can anyone give me the reason why music is taught this way?

Can I cast Death Ward on additional creatures without causing previous castings to end?

Lighthouse Alternatives

Parent asking for money after moving out

Knights and Knaves: What does C say?

Caro-Kann c4-c5 push

How to use the Data object in VueJS when using Decorators? “Expected 'this' to be used by class method 'data'.”

TypeScript Unexpected token, A constructor, method, accessor or property was expectedHow can I merge properties of two JavaScript objects dynamically?How to change an element's class with JavaScript?How do I remove a property from a JavaScript object?How do I check if an array includes an object in JavaScript?How do I test for an empty JavaScript object?How do I loop through or enumerate a JavaScript object?How do I correctly clone a JavaScript object?How to make a chain of function decorators?How to check if an object is an array?How to decide when to use Node.js?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty
margin-bottom:0;

1

Error > Expected 'this' to be used by class method 'data'.

I did find this, and thought I had it correct below:
TypeScript Unexpected token, A constructor, method, accessor or property was expected

<script lang="ts">
import Component, Prop, Vue from 'vue-property-decorator'
import MOON_HOLDINGS_LINK, TWITTER_LINK from '@/constants/links'

@Component
export default class HelloWorld extends Vue 
 @Prop() private title!: string

 data(): any 
 return 
 moonLink: MOON_HOLDINGS_LINK,
 
 

</script>

javascript vue.js vuejs2 decorator

share|improve this question

edited Mar 29 at 0:46

Leon Gaban

asked Mar 28 at 20:54

Leon GabanLeon Gaban

11.5k4949 gold badges204204 silver badges382382 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Thats just from the linter. you can override that in your base config. If you haven't already you can also use the eslint-plugin-vue to help with usage of directives and style guide :)
  
  – John Ruddell
  Mar 28 at 23:25
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks @JohnRuddell! Yeah static also fixed the issue, but also yeah I didn't need these variables in the data() method.
  
  – Leon Gaban
  Mar 28 at 23:37
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Oh hey Leon! didn't realize that was you :D
  
  – John Ruddell
  Mar 28 at 23:38
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  @JohnRuddell sup man hehe, how's Whoat these days? btw build this in React/Typescript lmk what you think: moon.holdings
  
  – Leon Gaban
  Mar 28 at 23:55
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Haha I moved from that place a long time ago! We should catch up sometime :) I'll check it out this evening
  
  – John Ruddell
  Mar 28 at 23:59
  

  
  
  
  

add a comment
 | 

1

Error > Expected 'this' to be used by class method 'data'.

I did find this, and thought I had it correct below:
TypeScript Unexpected token, A constructor, method, accessor or property was expected

<script lang="ts">
import Component, Prop, Vue from 'vue-property-decorator'
import MOON_HOLDINGS_LINK, TWITTER_LINK from '@/constants/links'

@Component
export default class HelloWorld extends Vue 
 @Prop() private title!: string

 data(): any 
 return 
 moonLink: MOON_HOLDINGS_LINK,
 
 

</script>

javascript vue.js vuejs2 decorator

share|improve this question

edited Mar 29 at 0:46

Leon Gaban

asked Mar 28 at 20:54

Leon GabanLeon Gaban

11.5k4949 gold badges204204 silver badges382382 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Thats just from the linter. you can override that in your base config. If you haven't already you can also use the eslint-plugin-vue to help with usage of directives and style guide :)
  
  – John Ruddell
  Mar 28 at 23:25
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks @JohnRuddell! Yeah static also fixed the issue, but also yeah I didn't need these variables in the data() method.
  
  – Leon Gaban
  Mar 28 at 23:37
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Oh hey Leon! didn't realize that was you :D
  
  – John Ruddell
  Mar 28 at 23:38
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  @JohnRuddell sup man hehe, how's Whoat these days? btw build this in React/Typescript lmk what you think: moon.holdings
  
  – Leon Gaban
  Mar 28 at 23:55
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Haha I moved from that place a long time ago! We should catch up sometime :) I'll check it out this evening
  
  – John Ruddell
  Mar 28 at 23:59
  

  
  
  
  

add a comment
 | 

Error > Expected 'this' to be used by class method 'data'.

I did find this, and thought I had it correct below:
TypeScript Unexpected token, A constructor, method, accessor or property was expected

<script lang="ts">
import Component, Prop, Vue from 'vue-property-decorator'
import MOON_HOLDINGS_LINK, TWITTER_LINK from '@/constants/links'

@Component
export default class HelloWorld extends Vue 
 @Prop() private title!: string

 data(): any 
 return 
 moonLink: MOON_HOLDINGS_LINK,
 
 

</script>

javascript vue.js vuejs2 decorator

share|improve this question

edited Mar 29 at 0:46

Leon Gaban

asked Mar 28 at 20:54

Leon GabanLeon Gaban

11.5k4949 gold badges204204 silver badges382382 bronze badges

<script lang="ts">
import Component, Prop, Vue from 'vue-property-decorator'
import MOON_HOLDINGS_LINK, TWITTER_LINK from '@/constants/links'

@Component
export default class HelloWorld extends Vue 
 @Prop() private title!: string

 data(): any 
 return 
 moonLink: MOON_HOLDINGS_LINK,
 
 

</script>

share|improve this question

edited Mar 29 at 0:46

Leon Gaban

asked Mar 28 at 20:54

Leon GabanLeon Gaban

11.5k4949 gold badges204204 silver badges382382 bronze badges

share|improve this question

edited Mar 29 at 0:46

Leon Gaban

asked Mar 28 at 20:54

Leon GabanLeon Gaban

11.5k4949 gold badges204204 silver badges382382 bronze badges

asked Mar 28 at 20:54

Leon GabanLeon Gaban

11.5k4949 gold badges204204 silver badges382382 bronze badges

asked Mar 28 at 20:54

Leon GabanLeon Gaban

11.5k4949 gold badges204204 silver badges382382 bronze badges

1 Answer
1

active

oldest

votes

2

That's due to the class-methods-use-this rule of ESLint.

But data() shouldn't need to use this (only in very rare situations).

So you probably should suppress the warning for that specific method, as I believe data() meets the scenario described by ESLint as a possible exception to that rule:

For example, you might have a spec from an external library that requires you to overwrite a method as a regular function (and not as a static method) and does not use this inside the function body.

So you would use:

/*eslint class-methods-use-this: ["error", "exceptMethods": ["data"] ] */

Example:

<script lang="ts">
import Component, Prop, Vue from 'vue-property-decorator'
import MOON_HOLDINGS_LINK, TWITTER_LINK from '@/constants/links'

@Component
export default class HelloWorld extends Vue 
 @Prop() private title!: string

 /*eslint class-methods-use-this: ["error", "exceptMethods": ["data"] ] */
 data(): any 
 return 
 moonLink: MOON_HOLDINGS_LINK,
 
 

</script>

share|improve this answer

answered Mar 28 at 21:28

acdcjunioracdcjunior

90.8k2323 gold badges218218 silver badges210210 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  It would be annoying to write out the ignore comment for every Vue class. Probably better to stuff that override in a .eslintrc or something
  
  – John Ruddell
  Mar 28 at 23:22
  
  

  
  
  
  

add a comment
 | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55406698%2fhow-to-use-the-data-object-in-vuejs-when-using-decorators-expected-this-to-b%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

2

That's due to the class-methods-use-this rule of ESLint.

But data() shouldn't need to use this (only in very rare situations).

So you probably should suppress the warning for that specific method, as I believe data() meets the scenario described by ESLint as a possible exception to that rule:

For example, you might have a spec from an external library that requires you to overwrite a method as a regular function (and not as a static method) and does not use this inside the function body.

So you would use:

/*eslint class-methods-use-this: ["error", "exceptMethods": ["data"] ] */

Example:

<script lang="ts">
import Component, Prop, Vue from 'vue-property-decorator'
import MOON_HOLDINGS_LINK, TWITTER_LINK from '@/constants/links'

@Component
export default class HelloWorld extends Vue 
 @Prop() private title!: string

 /*eslint class-methods-use-this: ["error", "exceptMethods": ["data"] ] */
 data(): any 
 return 
 moonLink: MOON_HOLDINGS_LINK,
 
 

</script>

share|improve this answer

answered Mar 28 at 21:28

acdcjunioracdcjunior

90.8k2323 gold badges218218 silver badges210210 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  It would be annoying to write out the ignore comment for every Vue class. Probably better to stuff that override in a .eslintrc or something
  
  – John Ruddell
  Mar 28 at 23:22
  
  

  
  
  
  

add a comment
 | 

2

That's due to the class-methods-use-this rule of ESLint.

But data() shouldn't need to use this (only in very rare situations).

So you probably should suppress the warning for that specific method, as I believe data() meets the scenario described by ESLint as a possible exception to that rule:

For example, you might have a spec from an external library that requires you to overwrite a method as a regular function (and not as a static method) and does not use this inside the function body.

So you would use:

/*eslint class-methods-use-this: ["error", "exceptMethods": ["data"] ] */

Example:

<script lang="ts">
import Component, Prop, Vue from 'vue-property-decorator'
import MOON_HOLDINGS_LINK, TWITTER_LINK from '@/constants/links'

@Component
export default class HelloWorld extends Vue 
 @Prop() private title!: string

 /*eslint class-methods-use-this: ["error", "exceptMethods": ["data"] ] */
 data(): any 
 return 
 moonLink: MOON_HOLDINGS_LINK,
 
 

</script>

share|improve this answer

answered Mar 28 at 21:28

acdcjunioracdcjunior

90.8k2323 gold badges218218 silver badges210210 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  It would be annoying to write out the ignore comment for every Vue class. Probably better to stuff that override in a .eslintrc or something
  
  – John Ruddell
  Mar 28 at 23:22
  
  

  
  
  
  

add a comment
 | 

That's due to the class-methods-use-this rule of ESLint.

But data() shouldn't need to use this (only in very rare situations).

So you probably should suppress the warning for that specific method, as I believe data() meets the scenario described by ESLint as a possible exception to that rule:

For example, you might have a spec from an external library that requires you to overwrite a method as a regular function (and not as a static method) and does not use this inside the function body.

So you would use:

/*eslint class-methods-use-this: ["error", "exceptMethods": ["data"] ] */

Example:

<script lang="ts">
import Component, Prop, Vue from 'vue-property-decorator'
import MOON_HOLDINGS_LINK, TWITTER_LINK from '@/constants/links'

@Component
export default class HelloWorld extends Vue 
 @Prop() private title!: string

 /*eslint class-methods-use-this: ["error", "exceptMethods": ["data"] ] */
 data(): any 
 return 
 moonLink: MOON_HOLDINGS_LINK,
 
 

</script>

share|improve this answer

answered Mar 28 at 21:28

acdcjunioracdcjunior

90.8k2323 gold badges218218 silver badges210210 bronze badges

/*eslint class-methods-use-this: ["error", "exceptMethods": ["data"] ] */

<script lang="ts">
import Component, Prop, Vue from 'vue-property-decorator'
import MOON_HOLDINGS_LINK, TWITTER_LINK from '@/constants/links'

@Component
export default class HelloWorld extends Vue 
 @Prop() private title!: string

 /*eslint class-methods-use-this: ["error", "exceptMethods": ["data"] ] */
 data(): any 
 return 
 moonLink: MOON_HOLDINGS_LINK,
 
 

</script>

share|improve this answer

answered Mar 28 at 21:28

acdcjunioracdcjunior

90.8k2323 gold badges218218 silver badges210210 bronze badges

answered Mar 28 at 21:28

acdcjunioracdcjunior

90.8k2323 gold badges218218 silver badges210210 bronze badges

answered Mar 28 at 21:28

acdcjunioracdcjunior

90.8k2323 gold badges218218 silver badges210210 bronze badges