Vuejs DOM取出

Question

我已綁定的陣列events含有事件以填充在調度程序（調度DHTMLX）的成分標籤<scheduler>數據後不更新。但是，DOM不會自動刷新當由創建vue實例時觸發的getEvents方法檢索到數據時。

有2個VUE文件和我一起工作：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>