javascript - vue+wangEdit的Cannot read property 'menus' of undefined

问题描述

问 题

想做个后台轮子方便以后开发用，中间表单这块的富文本编辑想集成wangEdit进来，用了vue+vue-router，打算是做成独立模块的，前端调用组件后请求后端提供的数据接口来渲染出想要的页面，所以页面内这么写了：

<template>
    <div>
        <div v-for="item in items">
            <div v-if="item.type=='editor'">
                <label>{{ item.title }}</label>
                <div id="editor" style="height:400px;max-height:500px;">
                    {{ item.model }}
                </div>
            </div>
            <div v-if="item.type=='input'">
                <el-input v-model="item.model" placeholder="请输入内容"></el-input>
            </div>
        </div>
    </div>
</template>

然后在vue的mounted里写了：

mounted() {
            axios.get('shop/pageData').then((res)=>{
                this.items = res.data.data;
                var editor = new wangEditor('editor');
                editor.create();
            });
        }

然后渲染不出来，报错

Uncaught (in promise) TypeError: Cannot read property 'menus' of undefined

没怎么做过前端和用vue，请问各位：
1.vue 配合后端如何更好的获取数据，直接在页面调用组件的时候json_encode($data)//我用的php做后端
还是在组件被调用时来axios请求获取数据
2.开始以为是时间差问题，以为数据没有请求到就去渲染才出的问题，所以试了一下在created(){}部分去请求数据，将值赋给this.data，然后在mounted(){}去调用的时候发现this.data没有值，这是为啥呢？

解决方案

执行new wangEditor('editor')的时候id=editor这个节点是否存在？应该是这个的问题

这篇关于javascript - vue+wangEdit的Cannot read property 'menus' of undefined的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！