Vuejs DOM doesn't update after fetching data

Question

I have bound an array events to a component tag <scheduler> containing events to fill in a scheduler app (dhtmlx scheduler). However, the DOM doesn't seeem to refresh itself when data is retrieved by the getEvents methods triggered when vue instance is created.

There is 2 vue files I work with: App.vue containing the main app component and the Scheduler.vue file containing the scheduler component.

The thing is that when I modify something in the Scheduler.vue file and save it, it correctly take the updated events array into account. Scheduler parse the data in the events prop when DOM is mounted in scheduler component.

Therefore is there something I can do to get the updated array ?

Here is the App.vue:

<template>
  <div id="app">
    <div class="container">
      <scheduler v-bind:events="events"></scheduler>
    </div>
  </div>
</template>

<script>
import Scheduler from './components/Scheduler.vue';
import auth from './components/auth/index'
import data from './components/data/index'

export default {
  name: 'app',
  components: {
    Scheduler
  },
  data() {
    return {
      events: []
    }
  },
  created() {
    this.getEvents();
  },
  watch: {
    events: function(value) {
      console.log('updated');
    }
  },
  methods: {
    async getEvents() {
      try {
        const token = await auth.getToken(this);
        const thattoken = await auth.getThatToken(this, token);
        await data.getOgustData(this, token, '/calendar/events', 307310564, this.events);
      } catch (e) {
        console.log(e);
      }
    },
  }
}
</script>

Here is Scheduler.vue:

<template lang="html">
  <div ref="scheduler_here" class="dhx_cal_container" style='width:100%; height:700px;'>
    <div class="dhx_cal_navline">
      <div class="dhx_cal_prev_button">&nbsp;</div>
      <div class="dhx_cal_next_button">&nbsp;</div>
      <div class="dhx_cal_today_button"></div>
      <div class="dhx_cal_date"></div>
      <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
      <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
      <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
    </div>
    <div class="dhx_cal_header"></div>
    <div class="dhx_cal_data"></div>
  </div>
</template>

<script>
import 'dhtmlx-scheduler'
import 'dhtmlx-scheduler/codebase/locale/locale_fr';
import 'dhtmlx-scheduler/codebase/ext/dhtmlxscheduler_readonly.js';

export default {
  name: 'scheduler',
  props: {
    events: {
      type: Array,
      default () {
        return [{
          id: '',
          text: '',
          start_date: '',
          end_date: '',
        }]
      }
    }
  },
  mounted() {
    scheduler.config.xml_date = '%Y-%m-%d %H:%i';
    // disable left buttons on lightbox
    scheduler.config.buttons_left = [];
    // enable cancel button on lightbox's right wing
    scheduler.config.buttons_right = ['dhx_cancel_btn'];
    // changing cancel button label
    scheduler.locale.labels['icon_cancel'] = 'Fermer';
    // hide lightbox in month view
    scheduler.config.readonly_form = true;
    // hide select bar in day and week views
    scheduler.config.select = false;
    scheduler.config.lightbox.sections = [
      {
        name: "description",
        height: 20,
        map_to: "text",
        type: "textarea",
        focus: true
      }
    ];

    scheduler.init(this.$refs.scheduler_here, new Date(), 'month');
    scheduler.parse(this.$props.events, 'json');
  },
}
</script>

<style lang="css" scoped>
  @import "~dhtmlx-scheduler/codebase/dhtmlxscheduler.css";
</style>

Answer 1

Problem is solved. The issue didn't come from Vue but rather from the dhtmlx scheduler which wasn't parsing events when events was updated.

I ended up watching for any changes to events and thus, parsing it when it updates.

Thanks again for the help provided.

App.vue :

<template>
  <div id="app">
    <div class="container">
      <scheduler v-bind:events="events"></scheduler>
    </div>
  </div>
</template>

<script>
import Scheduler from './components/Scheduler.vue';
import auth from './components/auth/index'
import data from './components/data/index'
import 'dhtmlx-scheduler'

export default {
  name: 'app',
  components: {
    Scheduler
  },
  data() {
    return {
      events: []
    }
  },
  created() {
    this.getEvents();
  },
  watch: {
    events: function(value) {
      scheduler.parse(this.events, 'json');
    }
  },
  methods: {
    async getEvents() {
      const token = await auth.getToken(this);
      const apiToken = await auth.getApiToken(this, token);
      this.events = await data.getApiData(this, apiToken, '/calendar/events', 307310564, this.events);
    }
  },
}
</script>

Answer 2

getOgustData can't populate events in a way that Vue can observe. Since you're passing it as an argument, the array itself can be updated, but it's not a reactive array. Try

var newEvents;
await data.getOgustData(this, token, '/calendar/events', 307310564, newEvents);
this.events = newEvents;

Assigning to this.events is something Vue can notice.