[Vuejs]-Pass "this" into nested data function Vuejs

by

2👍

✅

this never gets passed to pickerOptions‘s function, you’re just trying to access it. You get undefined every time because it’s another context when you call the function. This is how you would pass it (Warning: don’t use this code in your project, this is just for a demonstration):

new Vue({
  el: '#app',
  data: {
    test: 'test',
    pickerOptions: {
      firstDayOfWeek: 1,
      disabledDate: (date, context) => {
        if (date === null) {
          console.log(context.test);
          return true;
        }
        return false
      },
    },
  },
  mounted() {
    this.pickerOptions.disabledDate(null, this); // alternatevely use call(), .apply() or .bind()
  },
})
<script src="https://unpkg.com/vue"></script>

What you should do is to move disabledDate function from the data property of your component (it’s called “data” for a reason) to the methods or computed (depends on how you are going to use this function). In this case this will refer to the component instance.

EDIT: I took a look at how the component you use works. Seems like the best option would be to write pickerOptions as a computed property that returns an object with parameters for the component. Then you can pass this object to picker-options property.

👤oniondomes

0👍

From what @oniondomes suggested, I’ve converted pickerOptions into computed property and used it like this.

Final Solution

computed: {
  pickerOptions () {
      let startDate = this.start_date
      let options = {}
      options.firstDayOfWeek = 1
      options.disabledDate = function (date) {
        // needs to subtract 1 to enable current day to select
        if (date < startDate.setDate(startDate.getDate() - 1)) {
          return true
        }
        return false
      }
      return options
   }
}
👤Kaung Myat Lwin

Leave a comment