问题描述
使用 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>
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于