问题描述 使用 v-show 进行分步骤操作时,默认不显示编辑器,这时 vditor 提供的方法都失效了 代码如下 发布商品 '> '> '> ' type='text/javascript'> ' type='text/javascript'> '> ' type='text/ ..

Vditor 使用问题: 使用 v-show 默认不展示编辑器, 导致 vditor 提供方法失效

问题描述

使用 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>
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,使用 TypeScript 实现。

    29 引用 • 349 回帖 • 11 关注
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    1354 引用 • 8861 回帖 • 575 关注
2 操作
ronger 在 2019-08-12 11:01:10 更新了该帖
ronger 在 2019-08-12 11:03:17 更新了该帖
1 回帖
请输入回帖内容...
  • Vanessa

    你在 active === 2 的时候调用 new Vditor 试试