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


javascript - AJAX promise 后VueJS组件DOM不更新-LMLPHP

最佳答案

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

我正在尝试修改从父级组件传递过来的 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/

10-12 12:22
查看更多