export default {
  props: {
    goToSomePage: {
      type: Function,
      default: () => { this.$router.push({ name: 'some-page' }) }
    }
  }
}

I want do something like this but "this" is undefined.

Is there any way to solve this problem?

I want to give a default action and use "this" inside that callback func.

export default {
  props: {
    goToSomePage: {
      type: Function,
      default: () => { this.$router.push({ name: 'some-page' }) }
    }
  }
}

I want do something like this but "this" is undefined.

Is there any way to solve this problem?

I want to give a default action and use "this" inside that callback func.

• javascript
• vue.js
• vuejs2
• vue-ponent

• please show how do you use it? – Boussadjra Brahim Commented Apr 9, 2019 at 8:23

2 Answers 2

you can change arrow function to anonymous function as below

export default {
  props: {
    goToSomePage: {
      type: Function,
      default: function(){ this.$router.push({ name: 'some-page' }) }
    }
  }
}

the anonymous function uses the enclosing scope for this so you don't have to bind it by ur self. that means here the anonymous function will use the same scope as the other options

The reason your attempt does not work is because:

1. You used arrow function where this is lexical.
2. Vue does not automatically bind functions passed to props property with any Vue instance. So this is automatically bind to the window (global) object.

You can try something like this:

new Vue({
  el: '#app',
  props: {
    goToSomePage: {
      type: Function
    }
  },
  puted: {
    putedGoToSomePage(){
      // If `goToSomePage` prop is provided, return that function
      if (typeof this.goToSomePage === 'function')
        return this.goToSomePage.bind(this);

      // Else, return your intended $router function here
      return (() => {
        /* UNCOMMENT THIS IN YOUR CODE */
        // this.$router.push({ name: 'some-page' })

        // This is to prove that `this` is referencing the Vue instance
        console.log(this);
      })
    }
  }
});

<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">
  <button @click="putedGoToSomePage">Go To Some Page</button>
</div>

The method above make use of puted property to pass your function. Using that, Vue magically bind this to its parent Vue instance.