Snow menu in Quill not hiding with v-if or v-show in vue.js

Question

I am using quill in a component called "editor". The issue I'm having is that if I use a v-if or v-show on the component in my HTML, the editor is hidden, but the snow menu remains. If I toggle I get multiple snow menus.

Has anyone else experienced this problem?

Below is my markup

Vue.component('editor', {
    template: '<div ref="editor"></div>',

    props: {
        value: {
            type: String,
            default: ''
        }
    },

    data: function() {
        return {
            editor: null
        };
    },
    mounted: function() {
        this.editor = new Quill(this.$refs.editor, {
            modules: {
                toolbar: [
                    [{ header: [1, 2, 3, 4, false] }],
                    ['bold', 'italic', 'underline'],
                    ['image', 'code-block', 'link']
                ]
            },
            //theme: 'bubble',
            theme: 'snow',
            formats: ['bold', 'underline', 'header', 'italic'],
            placeholder: "Type something in here!"
        });

        this.editor.root.innerHTML = this.value;

        this.editor.on('text-change', () => this.update());

    },
    methods: {
        update: function() {
            this.$emit('input', this.editor.getText() ? this.editor.root.innerHTML : '');
        }
    }
})

new Vue({
    el: '#root',
    data: {
        //model: 'Testing an editor'
        model: '',
        isShowing: true
    }

})

And here is my HTML Markup

<!DOCTYPE html>
<html>
<head>
    <title>Trying to use the Quill Editor in Vue</title>

    <!-- Include stylesheet -->
    <link href="https://cdn.quilljs.com/1.3.4/quill.core.css" rel="stylesheet">
    <link href="https://cdn.quilljs.com/1.3.4/quill.snow.css" rel="stylesheet">
    <link href="https://cdn.quilljs.com/1.3.4/quill.bubble.css" rel="stylesheet">
</head>
<body>
    <div id="root">
        <div v-if="isShowing">
            <editor v-model="model"></editor>
        </div>
        <p>I need the v-html directive: <span v-html="model"></span></p>
        <p>Raw data: <pre>{{ model }}</pre></p>
        <button @click="isShowing = !isShowing">Toggle</button>
    </div>

    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="quill_in_wrapper_ie11.js"></script>

</body>
</html>

The images, editor etc works perfectly, except for the links. If I highlight the text and click the link button on the toolbar, I get the dialog box to save the link.

But it doesn't save the link.

Any thoughts? Thanks

Ugh, I fixed this. I'm having a problem with the href link now. — user581733

user581733 user581733 · Accepted Answer · 2020-03-11T13:02:32

Sorry, I answered fixed the snow menu issue. I'm having a problem now with the link.

For the snow, I put the v-if on a wrapping div.

Edit

<div class="agendaAreaEditor" id="objectives" 
 v-on:keypress="checkTextArea('objectives')" 
 v-show="showMeetingObjective || editMeetingObjective" 
 v-bind:class="{error: agenda.objective.trim().length===0 && showValidationErrors}"> 
    <editor v-model="agenda.objective"></editor>
</div>

Snow menu in Quill not hiding with v-if or v-show in vue.js

1 Answers