javascript - VueJS 组件 DOM 在 AJAX Promise 后未更新

Question

我知道在 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>

Answer 1

通常情况下，我会在发帖后几分钟内回答自己的问题，但将来可能对其他人有用。

我试图修改从父组件传递下来的 Prop ，但你不能从子组件中执行此操作(当然，如果不向上发送事件来更改它，以便数据可以向下流动)

我需要将 prop 的副本复制到数据结构中(有人评论说我没有在数据结构中注册模块，所以他们是对的)

我在文档中找到了一个明确的解决方案(RTFM!!)

One-Way Data Flow

All props form a one-way-down binding between the child property and the parent one

...

There are usually two cases where it’s tempting to mutate a prop: 1.The prop is used to only pass in an initial value, the child component simply wants to use it as a local data property afterwards;

...

The proper answer to these use cases are:

Define a local data property that uses the prop’s initial value as its initial value:

props: ['initialCounter'],
data: function () {
    return { counter: this.initialCounter }
}

https://v2.vuejs.org/v2/guide/components.html#One-Way-Data-Flow