Vuejs DOM在获取数据后不更新

Question

我已将数组事件绑定到组件标签

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

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

因此，我可以做些什么来获得更新的阵列吗？

这是应用程序。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

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

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

再次感谢您提供的帮助。

pp.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

无法以Vue可以观察到的方式填充事件。由于您将其作为参数传递，因此可以更新数组本身，但它不是被动数组。尝试

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

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