问题描述
使用 v-show 进行分步骤操作时,默认不显示编辑器,这时 vditor 提供的方法都失效了
代码如下
<html> <head> <title>发布商品</title> <link rel="stylesheet" type="text/css" href="<c:url value="/element/css/index.css"/>"> <script src="<c:url value="/element/js/vue.js"/>"></script> <script src="<c:url value="/element/js/index.js"/>"></script> <script src="<c:url value="/js/easyui-1.5.5.2/jquery.min.js" />" type="text/javascript"></script> <script src="<c:url value="/js/common.js" />" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="<c:url value="/vditor/index.classic.css"/>"> <script src="<c:url value="/vditor/index.min.js" />" type="text/javascript" defer></script> <script src="<c:url value="/vditor/static.js" />" type="text/javascript" defer></script> </head> <body> <div id="app"> <el-form v-show="active == 1" label-width="100px" style="padding:2rem 5vw;"> <el-form-item> <el-button type="primary" @click="onSubmit('item')">保存并查看</el-button> <el-button @click="next('item')">下一步</el-button> </el-form-item> </el-form> <el-form v-show="active == 2" label-width="100px" style="padding:2rem 5vw;"> <el-form-item> <div id="vditor"></div> </el-form-item> <el-form-item> <el-button @click="prev('item')">上一步</el-button> <el-button type="primary" @click="onSubmit('item')">保存并查看</el-button> </el-form-item> </el-form> </div> </body> <script type="text/javascript" defer> let result = []; let app = new Vue({ el: "#app", data:{ active: 1 }, methods:{ prev: function(){ this.$refs.item.validate((valid) => { if (valid) { this.active-- } else { return false; } }) }, next: function () { this.$refs.item.validate((valid) => { if (valid) { if(this.active++ > 1){ app.active = 2; console.log(app.itemDetail.itemDetail); window.vditor.setValue(app.itemDetail.itemDetail); } } else { return false; } }) } }, mounted: function () { } }) </script> </html>
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于