我知道AJAX回调后在Vue应用程序中更新数据的常见问题-我已经阅读了common gotchas并使用Vue.set
修复了类似的问题,但是今天对我来说不起作用。
我能想到的唯一区别是,我正在组件内部调用服务(.vue
文件)
如果我使用chrome中的VueJS工具检查dom,则可以看到来自服务的数据已分配给我的module.options
属性,这一切都在创建的函数中发生,但未在屏幕上绘制
附件是完整的.vue
组件和屏幕快照,显示了记录在开发工具中的数据以及未呈现该模板的模板。
该代码段不会运行,只是比直接将其粘贴到帖子中更好的格式。
简而言之,this.build_service.getOptionsForModule
的响应给出了我想要的内容,并且Vue.set( this.module, 'options', res.options )
似乎可以工作,但是没有更新DOM。
有什么想法吗?
<template>
<div class="panel">
<div class="panel-heading">
<h2 class="panel-title">
<a data-toggle="collapse" :href="'#collapse' + module.field" :data-parent="'#' + group_name" >
{{module.title}}
<!-- <span class="pull-right" v-if="module.options.length"> -->
[{{module.options.length}}]
<!-- </span> -->
</a>
</h2>
</div>
<div :id="'collapse' + module.field" class="panel-collapse collapse">
<div class="panel-body">
<div class="form-group">
{{module}}
<!-- v-model="modules.selected[ module.field ]" -->
<select id="" data-target="#" class="form-control" :disabled="!module.is_active">
<option :value="{}">Select {{module.title}}...</option>
<option v-for="option in module.options" :value="option" v-html="option.name">
</option>
</select>
<!-- @change="modules.checkChildren( module )" -->
</div>
<div class="form-group">
<button class="btn btn-success mediumButton" @click="create( module )">
Create
</button>
<!-- :disabled="!modules.isSelected( module.field )" -->
<button class="btn btn-primary mediumButton" @click="edit( module )">
Edit
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { EventBus } from '../event-bus.js';
var BuildService = require('../services/build-service');
export default {
name: 'module',
props: [ 'group_name', 'module' ],
data: function() {
return {
}
},
created: function() {
console.log('single module component created');
this.build_service = new BuildService();
console.log( this.module );
// if there are no options, load from service
if( !this.module.options.length && this.module.parent === '' ) {
this.build_service.getOptionsForModule( this.module )
.then(( res ) => {
if( res.length ) {
res = res[ 0 ];
Vue.delete(
this.module,
'options'
);
Vue.set(
this.module,
'options',
res.options
);
} else {
console.error('no options found');
// TODO: status alert
}
})
.catch(function(err){
console.error(err);
});
}
},
methods: {
create: function( module ) {
console.log('creating record for', module);
},
edit: function( module ) {
console.log('editing', module);
}
}
}
</script>
最佳答案
通常情况下,我会在发布后几分钟内回答自己的问题,但将来可能对其他人有用。
我正在尝试修改从父级组件传递过来的 Prop ,而您不能从子级进行修改(当然,如果没有发送高电平的事件来更改它,则数据可能会向下传播)
我需要将prop的副本复制到数据结构中(有人确实评论说我没有在数据结构中注册模块,所以他们对此是正确的)
我在文档中找到了一个明确的解决方案(RTFM !!)
props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}
https://vuejs.org/v2/guide/components.html#One-Way-Data-Flow
关于javascript - AJAX promise 后VueJS组件DOM不更新,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44722335/