Vuejs在获取数据后不会更新

Question

我已经将数组events绑定到包含事件的组件标记<scheduler>，以填充调度程序应用程序(dhtmlx调度程序)。但是，当创建vue实例时被方法触发的getEvents方法检索数据时，DOM并没有看到刷新自己的。

我使用了两个vue文件:包含主app组件的App.vue和包含调度程序组件的Scheduler.vue文件。

问题是，当我修改Scheduler.vue文件中的某些内容并保存它时，它正确地考虑了更新的events数组。当DOM被挂载到调度器组件中时，调度器解析events支柱中的数据。

因此，我能做些什么来获得更新的数组吗？

这里是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>

这是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

getOgustData不能以Vue可以观察到的方式填充events。因为您将它作为参数传递，所以可以更新数组本身，但它不是反应性数组。试一试

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

分配给this.events是Vue可以注意到的事情。

Answer 2

问题解决了。问题不是来自Vue，而是来自dhtmlx调度程序，它在更新events时没有解析事件。

最后，我观察了对events的任何更改，因此，在它更新时解析它。

再次感谢你的帮助。

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>