Can be exclude `this` keyword in vue.js application?

Question

Actually I am following Douglas Crockford jslint .

It give warning when i use this.

[jslint] Unexpected 'this'. (unexpected_a)

I can not see any solution around for the error . Don't say add this in jslist.options and mark it true.

Is there is any approach without using this?

EDIT ADDED CODE

// some vue component here

   <script>
    export default {
      name: "RefereshPage",
      data() {
        return {
          progressValue: 0
        }
      },
      methods:{
        getRefreshQueue(loader){
          console.log(this.progressValue); // ERROR come here [jslint] Unexpected 'this'. (unexpected_a) 
      }
    }
   }
    </script>

Check out this jsfiddle. How can you avoid using this?

https://jsfiddle.net/himmsharma99/ctj4sm7f/5/

this does not make sense. what does the code look like that you are linting? — phoet, Aug 30 '18 at 12:43
Your code seems correct, you may should consider fixing jsLint or try with esLint, ([from here](https://forum.vuejs.org/t/how-to-get-rid-of-this-key-word-in-vue-app-to-make-it-jslint/41329)). — Chocolord, Aug 30 '18 at 13:35
I know it is correct . But i am asking is this possible to not use `this` in vue.js . I want to follow jslint without 'this' keyword in javascript . Is this possible , In jsfiddle i have use the code . Is that can be done without `this` ? — Himanshu sharma, Aug 30 '18 at 13:47
Possible duplicate of https://stackoverflow.com/questions/31891931/why-does-jslint-forbid-the-this-keyword — tony19, Sep 21 '18 at 06:33
Linters are there to help you flag potential issues, but they are not inerrant. If a rule is not useful in your particular application, you should disable it, especially for a particularly opinionated one like jsLint. — Lie Ryan, Sep 27 '18 at 01:20

score 5 · Answer 1 · edited Jul 15 '22 at 01:54

5

as i already stated in the comments:

using this is an integral part of how vue.js works within a component. you can read more about how it proxies and keeps track of dependencies here: https://v2.vuejs.org/v2/api/#Options-Data

edited Jul 15 '22 at 01:54

tony19

125,647
18
229
307

answered Sep 20 '18 at 13:25

phoet

18,688
4
46
74

Husam Ibrahim · Answer 2 · 2018-09-27T02:08:20.793

As others have said, you're better off just disabling your linter or switching to ESLint. But if you insist on a workaround, you could use a mixin and the $mount method on a vue instance to avoid using this altogether ..

    let vm;

    const weaselMixin = {
        methods: {
            getdata() {
                console.log(vm.users.foo.name);
            }
        },
        mounted: function () {
            vm.getdata();
        }
    };

    vm = new Vue({
        mixins: [weaselMixin],
        data: {
            users: {
                foo: {
                    name: "aa"
                }
            }
        }
    });

    vm.$mount('#app');

See the modified JSFiddle

As you can see, this only complicates what should be a fairly simple component. It only goes to show that you shouldn't break the way vue works just to satisfy your linter.

I would suggest you go through this article. Particularly important is this part ..

Vue.js proxies our data and methods to be available in the this context. So by writing this.firstName, we can access the firstName property within the data object. Note that this is required.

score 0 · Answer 3 · answered Sep 25 '18 at 18:35

0

In the code you posted, you appear to be missing a } after getRefreshQueue definition. It's not the error your linter is describing, but maybe it got confused by the syntax error?

answered Sep 25 '18 at 18:35

LShapz

1,738
11
19

added } in question – Himanshu sharma Sep 26 '18 at 06:30

score 0 · Answer 4 · answered Sep 06 '20 at 10:01

It is possible using the new Composition API. Vue 3 will have in-built support, but you can use this package for Vue 2 support.

An example of a component without this (from vuejs.org):

<template>
  <button @click="increment">
    Count is: {{ state.count }}, double is: {{ state.double }}
  </button>
</template>

<script>
import { reactive, computed } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0,
      double: computed(() => state.count * 2)
    })

    function increment() {
      state.count++
    }

    return {
      state,
      increment
    }
  }
}
</script>

Can be exclude `this` keyword in vue.js application?

4 Answers4