0

My component has a data property daily_goal.

I have a modal that is used to set a new value to daily_goal.

I open my modal like so:

  toSetDailyGoalPopup() {
    this.$showModal(setDailyGoalPopup, {
      fullscreen: true,
      props: {daily_goal: this.daily_goal},
    }).then(function(newGoal) {
      alert(newGoal);
      alert(this.daily_goal);
      this.daily_goal = newGoal;
    });
  },

And I close my modal like this:

<button
  text="Set"
  @tap="modal.close(daily_goal)"
/>

When I press set in my modal. The modal is closed, then I get only one alert correctly telling me the new value that is supposed to be set, but the second alert is not displayed and the value is also not updated.

How can I change this code to achieve what I want?

Update The following did the trick:

.then(
  ((newGoal) => {this.daily_goal = newGoal;}).bind(this)
)
yukashima huksay
  • 5,834
  • 7
  • 45
  • 78
  • @Bergi I tried `}).then(this.callback.bind(this));` and defined the function as a method but it didn't work, can you elaborate please? – yukashima huksay Jul 23 '19 at 17:58
  • There's no reason to define the function as a method. Just use an arrow function, or your function expression with `.bind(this)` at the end. – Bergi Jul 23 '19 at 19:43
  • @Bergi maybe you could show me how exactly I should do that. I don't know what you exactly mean by function expression of an arrow function – yukashima huksay Jul 23 '19 at 19:50
  • I said function expression (`.then(function(newGoal) { … }.bind(this))`) *or* arrow function (`.then(newGoal => { … })`) – Bergi Jul 23 '19 at 19:51
  • Regarding your update, using *either* `bind` *or* arrow function syntax is enough. Don't use both together. – Bergi Jul 23 '19 at 20:32
  • oh! yeah, I get it now! – yukashima huksay Jul 23 '19 at 20:40

0 Answers0