Asked  7 Months ago    Answers:  5   Viewed   43 times

I'm creating a component with Vue.js.

When I reference this in any of the the lifecycle hooks (created, mounted, updated, etc.) it evaluates to undefined:

mounted: () => {
  console.log(this); // logs "undefined"
},

The same thing is also happening inside my computed properties:

computed: {
  foo: () => { 
    return this.bar + 1; 
  } 
}

I get the following error:

Uncaught TypeError: Cannot read property 'bar' of undefined

Why is this evaluating to undefined in these cases?

 Answers

75

Both of those examples use an arrow function () => { }, which binds this to a context different from the Vue instance.

As per the documentation:

Don’t use arrow functions on an instance property or callback (e.g. vm.$watch('a', newVal => this.myMethod())). As arrow functions are bound to the parent context, this will not be the Vue instance as you’d expect and this.myMethod will be undefined.

In order to get the correct reference to this as the Vue instance, use a regular function:

mounted: function () {
  console.log(this);
}

Alternatively, you can also use the ECMAScript 5 shorthand for a function:

mounted() {
  console.log(this);
}
Tuesday, June 1, 2021
 
Raef
answered 7 Months ago
20

VueJS can't pickup your changes to the state if you manipulate arrays like this.

As explained in Common Beginner Gotchas, you should use array methods like push, splice or whatever and never modify the indexes like this a[2] = 2 nor the .length property of an array.

new Vue({
  el: '#app',
  data: {
    f: 'DD-MM-YYYY',
    items: [
      "10-03-2017",
      "12-03-2017"
    ]
  },
  methods: {

    cha: function(index, item, what, count) {
      console.log(item + " index > " + index);
      val = moment(this.items[index], this.f).add(count, what).format(this.f);

      this.items.$set(index, val)
      console.log("arr length:  " + this.items.length);
    }
  }
})
ul {
  list-style-type: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<div id="app">
  <ul>
    <li v-for="(index, item) in items">
      <br><br>
      <button v-on:click="cha(index, item, 'day', -1)">
      - day</button> {{ item }}
      <button v-on:click="cha(index, item, 'day', 1)">
      + day</button>
      <br><br>
    </li>
  </ul>
</div>
Wednesday, June 2, 2021
 
Easen
answered 7 Months ago
63

this is always the object the method is called on. However, when passing the method to then(), you are not calling it! The method will be stored somewhere and called from there later. If you want to preserve this, you will have to do it like this:

.then(() => this.method2())

or if you have to do it the pre-ES6 way, you need to preserve this before:

var that = this;
// ...
.then(function() { that.method2() })
Wednesday, June 2, 2021
 
Avicinnian
answered 7 Months ago
58

It isn't undefined.

Answered here for C, Sequence points and partial order

I think the same applies in C++ (and here's my response before I saw that link):

The comma operator introduces a sequence point (and constrains to some extent the order in which the expression must be evaluated - left before right), so:

  • the two modifications of i are separated by a sequence point (the second comma).
  • the modification of i in i++ is separated from everything else by sequence points.
  • the modification of i by = is not separated from the last occurrence of i in the expression, but that's OK because we're allowed to access i and modify it without an intervening sequence point, provided that the access is "to determine the value to be stored" (5/4).
  • As Als says, in practice it wouldn't matter whether that code has defined behavior or not provided that everyone had the basic common sense not to write it ;-)
Tuesday, August 17, 2021
 
Corbin March
answered 4 Months ago
53

Your require command is wrong/unecessary, nothing to do with webpack or vue-cli

Example code:

config
  .plugin('provide')
  .use(require('webpack').ProvidePlugin, [{
    $: 'jquery',
    jquery: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery'
  }])
Monday, November 8, 2021
 
Tuncaf
answered 1 Month ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :  
Share