Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Issues with v-if or redraw #6

Open
Einlanzers opened this issue Oct 4, 2018 · 3 comments
Open

Issues with v-if or redraw #6

Einlanzers opened this issue Oct 4, 2018 · 3 comments

Comments

@Einlanzers
Copy link

Einlanzers commented Oct 4, 2018 •
edited
Loading

If you surround the <tinymce> block in a <div> with a v-if condition.
The first time the v-if evaluates to "true" everything works, but the second time it no longer renders the TinyMCE editor. Instead it just leaves it as a "textarea".
I have got around this by using v-show instead.
Another issue arises if you try to re-order or re-structure the object(s) above the TinyMCE editor.
In my example I have an array of objects in VueJS. Each of these objects has a TinyMCE editor attached to it.
If I re-download the objects via AJAX then it breaks the editor so that it no longer has content and is read-only.

this.objectListing = data.objectListing;
<div v-for="object in objectListing">
    <div v-show="object.isShown">
        <tinymce />
    </div>
</div>
@user040F019F
Copy link

I have a similar issue with this. I have it within a v-if as well. When the v-if is false on the first render, it works well. If it becomes true, it works fine and shows the tinymce field. If it goes back to false, the tinymce isn't disposed of. Therefore if the condition becomes true again, you get a second tinymce feild... This can happen an infinite amount of times, creating a new tinymce every time the condition is true...

@mekane84
Copy link

on re-render it needs a new id... so remove "id" field or use "editor" in it's place since it handles that different

@colesnic89
Copy link

colesnic89 commented Jun 15, 2021 •
edited
Loading

It works fine if you wrap tinymce component in div and add v-if to div

<div v-if="condition">
    <tinymce></tinymce>
</div>

Directly on component v-if causes problems

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@mekane84 @colesnic89 @user040F019F @Einlanzers