Javascript VueJS组件DOM在AJAX承诺后未更新

Javascript VueJS组件DOM在AJAX承诺后未更新,javascript,ajax,dom,promise,vue.js,Javascript,Ajax,Dom,Promise,Vue.js,我知道在AJAX回调后更新Vue应用程序中的数据时会遇到一些常见问题—我已经通读了Vue.set,并在过去使用Vue.set修复了类似的问题,但现在它对我不起作用 我所能想到的唯一区别是调用的是component.vue文件中的服务 如果我使用chrome中的VueJS工具检查dom,我可以看到分配给module.options属性的服务中的数据,这一切都发生在创建的函数中,但它不会在屏幕上绘制 随附的是完整的.vue组件和一个屏幕截图,其中显示了dev工具中记录的数据以及未呈现该数据的模板 代

我知道在AJAX回调后更新Vue应用程序中的数据时会遇到一些常见问题—我已经通读了Vue.set,并在过去使用Vue.set修复了类似的问题,但现在它对我不起作用

我所能想到的唯一区别是调用的是component.vue文件中的服务

如果我使用chrome中的VueJS工具检查dom,我可以看到分配给module.options属性的服务中的数据,这一切都发生在创建的函数中,但它不会在屏幕上绘制

随附的是完整的.vue组件和一个屏幕截图,其中显示了dev工具中记录的数据以及未呈现该数据的模板

代码片段不会运行,只是一种比直接粘贴到文章中更好的格式

简言之,this.build_service.getOptionsForModule的响应给出了我想要的东西,并且Vue.set this.module、“options”、res.options似乎可以工作,但不会更新DOM

你知道为什么吗

{{module}} 选择{{module.title}}。。。 创造 编辑 从“../event bus.js”导入{EventBus}; var BuildService=require'../services/BuildService'; 导出默认值{ 名称:'模块', 道具:['组名称','模块'], 数据:函数{ 返回{ } }, 创建:函数{ console.log“创建单个模块组件”; this.build\u service=新的BuildService; console.log this.module; //如果没有选项,请从服务加载 if!this.module.options.length&&this.module.parent=={ this.build\u service.getoptions表单模块this.module 。然后res=>{ if res.length{ res=res[0]; Vue.delete 这个模块, “选项” ; Vue.set 这个模块, “选项”, 资源选择 ; }否则{ 控制台。错误“未找到任何选项”; //TODO:状态警报 } } 凯瑟先生{ console.error; }; } }, 方法:{ 创建:功能模块{ console.log“为”模块创建记录; }, 编辑:功能模块{ 日志编辑模块; } } }
通常情况下,我会在发帖后几分钟内回答自己的问题,但将来可能对其他人有用

我试图修改一个从父组件传下来的道具,如果不向上发送事件来更改它,使数据向下流动,那么从子组件传下来的道具是不可能的

我需要将道具复制到数据结构中,有人评论说我没有在数据结构中注册模块,所以他们是对的

我在文档RTFM中找到了一个清晰的解决方案

单向数据流

所有道具在子属性和父属性之间形成单向向下绑定

通常有两种情况下很容易使道具发生变异: 1.道具仅用于传入初始值,子组件只是想在以后将其用作本地数据属性

这些用例的正确答案是:

定义使用道具初始值作为其初始值的本地数据特性:


这是一个道具,虽然我只是在想这是否意味着我不能改变Itaaaaaaaaaaaaaaaaaaah,我想我在文档中找到了:定义一个本地数据属性,使用道具的初始值作为其初始值:为未来用户添加一个答案:一旦我测试了它并首先确认它工作正常,我将完全接受。2天内不能接受自己的答案,但我会接受,谢谢
props: ['initialCounter'],
data: function () {
    return { counter: this.initialCounter }
}