获取数据后Vuejs DOM不更新
[英] Vuejs DOM doesn't update after fetching data
本文介绍了获取数据后Vuejs DOM不更新的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已将数组 events 绑定到包含事件的组件标记 getEvents 方法检索数据时，DOM 似乎不会自行刷新.
我使用了 2 个 vue 文件:包含主应用程序组件的 App.vue 和包含调度程序组件的 Scheduler.vue 文件.
问题是，当我修改 Scheduler.vue 文件中的某些内容并保存时，它正确地将更新的 events 数组考虑在内.当 DOM 安装在调度程序组件中时，调度程序解析 events 属性中的数据.
因此我可以做些什么来获取更新的数组?
这是 App.vue:
<div id="应用程序"><div class="容器"><scheduler v-bind:events="events"></scheduler>
</模板><脚本>从'./components/Scheduler.vue'导入调度程序；从./components/auth/index"导入身份验证从'./components/data/index'导入数据导出默认{名称:'应用'，成分: {调度器},数据() {返回 {事件:[]}},创建(){this.getEvents();},手表: {事件:函数(值){console.log('更新');}},方法: {异步 getEvents() {尝试 {const token = await auth.getToken(this);const thattoken = await auth.getThatToken(this, token);等待 data.getOgustData(this, token, '/calendar/events', 307310564, this.events);}赶上(e){控制台日志(e)；}},}}
这是Scheduler.vue:
<div ref="scheduler_here" class="dhx_cal_container" style='width:100%;高度:700px;'><div class="dhx_cal_navline"><div class="dhx_cal_prev_button"> </div><div class="dhx_cal_next_button"> </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 class="dhx_cal_header"></div><div class="dhx_cal_data"></div>
</模板><脚本>导入dhtmlx 调度程序"导入 'dhtmlx-scheduler/codebase/locale/locale_fr';导入'dhtmlx-scheduler/codebase/ext/dhtmlxscheduler_readonly.js';导出默认{name: '调度程序',道具: {事件:{类型:数组，默认 () {返回 [{ID: ''，文本: ''，开始日期: ''，结束日期: ''，}]}}},安装(){scheduler.config.xml_date = '%Y-%m-%d %H:%i';//禁用灯箱上的左按钮scheduler.config.buttons_left = [];//启用灯箱右侧的取消按钮scheduler.config.buttons_right = ['dhx_cancel_btn'];//改变取消按钮标签scheduler.locale.labels['icon_cancel'] = 'Fermer';//在月视图中隐藏灯箱scheduler.config.readonly_form = true;//在日和周视图中隐藏选择栏scheduler.config.select = false;scheduler.config.lightbox.sections = [{名称:说明"，身高:20，map_to: "文本",类型:文本区域"，焦点:真实}];scheduler.init(this.$refs.scheduler_here, new Date(), 'month');scheduler.parse(this.$props.events, 'json');},}<style lang="css" 作用域>@import "~dhtmlx-scheduler/codebase/dhtmlxscheduler.css";</风格>
解决方案
问题解决了.问题不是来自 Vue，而是来自 dhtmlx 调度程序，当 events 更新时，它没有解析事件.
我最终观察了对 events 的任何更改，并在它更新时对其进行解析.
再次感谢您提供的帮助.
App.vue :
<div id="应用程序"><div class="容器"><scheduler v-bind:events="events"></scheduler>
</模板><脚本>从'./components/Scheduler.vue'导入调度程序；从./components/auth/index"导入身份验证从'./components/data/index'导入数据导入dhtmlx 调度程序"导出默认{名称:'应用'，成分: {调度器},数据() {返回 {事件:[]}},创建(){this.getEvents();},手表: {事件:函数(值){scheduler.parse(this.events, 'json');}},方法: {异步 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);}},}
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"> </div>
<div class="dhx_cal_next_button"> </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>
解决方案
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>
这篇关于获取数据后Vuejs DOM不更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
