CroudTech / vue-fullcalendar

FullCalendar Wrapper for vue
MIT License
483 stars 100 forks source link

Impossible to handle variable from local data and vuex in custom button #134

Closed ManoogD closed 6 years ago

ManoogD commented 6 years ago

Hello! I've run into problem when I need to change variable from custom button. Looks like impossible to change var from custom button function. I tried to make it with Vuex, it doesn't work as well.

Some code from project:

config: {
          defaultView: 'month',
          showNonCurrentDates: false,
          editable: true,
          eventLimit: true,
          allDaySlot: true,
          selectHelper: true,
          selectOverlap: false,
          fixedWeekCount: false,
          displayEventTime: true,
          header: {
            left: 'prev,next today, status',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
          },
          customButtons: {
            status: {
              text: "Event",
              click() {
                  .....HERE NOT WORKING
              }
            }
          }

when I want to change state in click() function, it didn't change anything from outside. I mean even if you have in your data() textTest var and try to make in click() this.textTest = "New Text" it didn't change. I also tried with vuex it didn't help. And I tried to import whole store in component and change with local store. It seems work but not correct.

In short: I want trigger modal from click(), I have a boolean var and I need to change its state but I can't.

I'll be glad any information or advice. Thanks!

BrockReece commented 6 years ago

This sounds like a scoping issue. I am guessing that this.textTest doesn't exist in the scope of the click method.

I have had success with using an arrow syntax function as opposed to the shorthand you are using in your example. This should inherit it's scope from the enclosing method.

click: () => {
  this.textTest = "New Text"
}

Though if this fails, you can proxy this to a local variable at the top of data method and use that local variable in the click method.


data() {
  const self = this
  return {
    config: {
    ...
    click() {
      self.textTest = "New Text"
    }
    ...
    }
  }
}
ManoogD commented 6 years ago

@BrockReece Thank you very much! Arrow syntax function works good! You helped me a lot! Thank you again!

BrockReece commented 6 years ago

No problem