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

本贴最后更新于 1770 天前,其中的信息可能已经事过景迁

问题描述

使用 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 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    326 引用 • 1701 回帖 • 1 关注
  • Q&A

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

    6813 引用 • 30652 回帖 • 240 关注
2 操作
ronger 在 2019-08-12 11:03:17 更新了该帖
ronger 在 2019-08-12 11:01:10 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
ronger
不论是否离开,都请保持能随时离开的能力! 南昌

推荐标签 标签

  • 七牛云

    七牛云是国内领先的企业级公有云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛先后推出了对象存储,融合 CDN 加速,数据通用处理,内容反垃圾服务,以及直播云服务等。

    26 引用 • 222 回帖 • 165 关注
  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖
  • 脑图

    脑图又叫思维导图,是表达发散性思维的有效图形思维工具 ,它简单却又很有效,是一种实用性的思维工具。

    21 引用 • 58 回帖
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流,分享无限上传的图片,发布链接和视频,更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 450 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 3 关注
  • Scala

    Scala 是一门多范式的编程语言,集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 113 关注
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。

    22 引用 • 22 回帖
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    10 引用 • 54 回帖 • 134 关注
  • 互联网

    互联网(Internet),又称网际网络,或音译因特网、英特网。互联网始于 1969 年美国的阿帕网,是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协议相连,形成逻辑上的单一巨大国际网络。

    96 引用 • 330 回帖
  • BND

    BND(Baidu Netdisk Downloader)是一款图形界面的百度网盘不限速下载器,支持 Windows、Linux 和 Mac,详细介绍请看这里

    107 引用 • 1281 回帖 • 31 关注
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    205 引用 • 357 回帖
  • IBM

    IBM(国际商业机器公司)或万国商业机器公司,简称 IBM(International Business Machines Corporation),总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国,是全球最大的信息技术和业务解决方案公司,拥有全球雇员 30 多万人,业务遍及 160 多个国家和地区。

    16 引用 • 53 回帖 • 119 关注
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,在 GNU 通用公共许可证(GPLv2)下授权发布。

    45 引用 • 113 回帖 • 291 关注
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    170 引用 • 813 回帖
  • 招聘

    哪里都缺人,哪里都不缺人。

    189 引用 • 1056 回帖
  • Spring

    Spring 是一个开源框架,是于 2003 年兴起的一个轻量级的 Java 开发框架,由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构,分层架构允许使用者选择使用哪一个组件,同时为 JavaEE 应用程序开发提供集成的框架。

    941 引用 • 1458 回帖 • 126 关注
  • DevOps

    DevOps(Development 和 Operations 的组合词)是一组过程、方法与系统的统称,用于促进开发(应用程序/软件工程)、技术运营和质量保障(QA)部门之间的沟通、协作与整合。

    42 引用 • 25 回帖
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    51 引用 • 37 回帖
  • JetBrains

    JetBrains 是一家捷克的软件开发公司,该公司位于捷克的布拉格,并在俄国的圣彼得堡及美国麻州波士顿都设有办公室,该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境:IntelliJ IDEA

    18 引用 • 54 回帖
  • Markdown

    Markdown 是一种轻量级标记语言,用户可使用纯文本编辑器来排版文档,最终通过 Markdown 引擎将文档转换为所需格式(比如 HTML、PDF 等)。

    165 引用 • 1468 回帖
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 704 关注
  • JRebel

    JRebel 是一款 Java 虚拟机插件,它使得 Java 程序员能在不进行重部署的情况下,即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 627 关注
  • PHP

    PHP(Hypertext Preprocessor)是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点,主要适用于 Web 开发领域,据说是世界上最好的编程语言。

    165 引用 • 407 回帖 • 523 关注
  • 音乐

    你听到信仰的声音了么?

    59 引用 • 509 回帖
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    261 引用 • 662 回帖 • 1 关注
  • 一些有用的避坑指南。

    69 引用 • 93 回帖 • 1 关注
  • 996
    13 引用 • 200 回帖 • 2 关注