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

user_5311317 0
Viewed 1243

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/

vuejs2 vue.js
4 Answers

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

user_1007310

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.

user_103416140

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?

user_70824070

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>
user_5028460
Related