vue v-if 切换 Tinymce 渲染失败

Question

vue v-if 切换 Tinymce 渲染失败

<template>
    <div class="app-container" >
        <template v-if="active === 1">内容1</template>
        <Tinymce v-if="active === 2" id="tinymce" v-model="form.detail" :height="300" />
    </div>
</template>                         
<script>
import Tinymce from "@/view/components/tinymce";
export default {
    components: { Tinymce },
    data()
    {
        active: 1,
        form:{
            detail: "内容"
        }
    }
</script>

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

在调用富文本组件的时候我把id传了进去导致的.
<Tinymce v-if="active === 2" id="tinymce" v-model="form.detail" :height="300" />
把id去掉,在子组件把id生成一个不会重复的就可以解决这个问题
<Tinymce v-if="active === 2" v-model="form.detail" :height="300" />
生成id可以用uuid

Answer 2

在Tinymce 外面包裹一个div , v-if 放在上面试一试

<div v-if="active === 2">
    <Tinymce id="tinymce" v-model="form.detail" :height="300" />
</div>

Answer 3

你的data并没有return。