0

my goal is to run a sideeffect when the "monthIndex" changes. In react I would use a useEffect hook with the dependency, but I am new to vue. I am basically incrementing the "monthIndex" via buttons, which changes the index in the array "daysInMonth". Every time the month index changes it should run the updateCalendar method and render the days of the calendar. That is my goal, thanks!

<template>
  <div id="app">
    <div class="header">
      <div class="controls">
        <button v-on:click="prevMonthHandler">prev</button>
        <h2>Date</h2>
        <button v-on:click="nextMonthHandler">next</button>
      </div>
    </div>
    <div class="weekdays">
      <p class="weekday" v-for="(weekday, index) in weekdays" :key="index">
        {{ weekday }}
      </p>
    </div>
    <div class="grid">
      {{ calendarDays }}
      <!-- <div class="day" v-for="(day, index) in calendarDays" :key="index">
        {{ day }}
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "App",

  mounted() {
    this.updateCalendar();
  },

  data() {
    return {
      monthIndex: 0,
      calendarDays: [],
      daysInMonth: [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30],
      weekdays: [
        "Sunday",
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday",
        "Saturday",
      ],
    };
  },



  methods: {

    updateCalendar() {
      for (let i = 0; i < this.daysInMonth[this.monthIndex]; i++) {
        this.calendarDays.push(i);
      }
    },

    nextMonthHandler() {
      if (this.monthIndex > 12) {
        this.monthIndex++;
      }
    },

    prevMonthHandler() {
      if (this.monthIndex < 0) {
        this.monthIndex--;
      }
    },
  },
};
</script>
lache
  • 608
  • 2
  • 12
  • 29
  • I thought about just running updateCalendar() in the button events but not sure that is right way. – lache Jan 28 '22 at 16:29
  • sorry, but your code just doesn't make sense to me: the `next` & `prev` handlers won't do anything: click on `nextMonthHandler` -> increment `monthIndex` IF it is greater than 12? But it is not (initialized with 0), and so never will be. The same is true with the `prevMonthHandler` (just "less than 0"). The `updateCalendar` function pushes numbers to an array, so it would end up being: `[0, 1, ..., 30, 0, 1, ..., 28, ...]`. What is EXACTLY that you'd want to do? – muka.gergely Jan 29 '22 at 07:29
  • I'm asking because reacting to value changes can be done in a number of ways, and only one of that is by using a `watcher` (that's close to `useEffect` with dependencies). Probably the whole logic could be different - making your life easier and your code cleaner. – muka.gergely Jan 29 '22 at 07:32
  • And lastly: I always advise people to not to meddle with `DateTime` on their own. That field has so many edge cases and "it's not what you'd count on your fingers", that it's almost always better to use a library (like [DayJS](https://day.js.org/)) that has it all worked out and provides a nice API to work with. – muka.gergely Jan 29 '22 at 07:35

1 Answers1

1

You can use watch property to detect changes to a variable.

You can see more functionalities of watch here

watch : {
  monthIndex(newVal, oldVal) {
    console.log(`Value updated from ${oldVal} to ${newVal}`)
  }
}
tony19
  • 125,647
  • 18
  • 229
  • 307
Naren
  • 11
  • 2