Question

我已将数组events绑定到组件标记<scheduler>，其中包含要填充调度程序应用程序（dhtmlx调度程序）的事件。但是，当创建vue实例时触发的getEvents方法检索数据时， DOM不会自我刷新。

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

问题是，当我在Scheduler.vue文件中修改某些内容并保存它时，它会正确地考虑更新的events数组。当DOM安装在调度程序组件中时，调度程序解析events prop中的数据。

因此我可以做些什么来获得更新的数组？

以下是 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>

获取数据后，Vuejs DOM不会更新

2 个答案: