How to select a codemirror instance in vue

Question

I have couple of codemirror instances and I want to select one of them how do I do that?

I have tried var basicEditor = VueCodemirror.CodeMirror($('#basic').get(0)); but it didn't work.

This is my code.

Vue.use(window.VueCodemirror);

Vue.component('edit', {
data: function () {
    return {
        basicHtml: '',
        mediaHtml: '',
        codeMirrorOptions: {
            tabSize    : 4,
            lineNumbers: true,
            line       : true,
            mode       : 'text/x-scss',
            gutters    : ["CodeMirror-lint-markers"],
            lint       : true,
            matchBrackets : true,
            autoCloseBrackets: true
        },
    }
},
template: `<div>
             <label>Basic Styles</label>
           <codemirror
                v-model="basicHtml"
                :options="codeMirrorOptions"
                @input="updateBasicHtml(basicHtml)"
                id="basic"
           ></codemirror>

           <label>Media Queries</label>
           <codemirror
                v-model="mediaHtml"
                :options="codeMirrorOptions"
                @input="updateMediaHtml(mediaHtml)"
                id="media"
           ></codemirror>
           <br/></div>`,
mounted: function () {
    this.keyEvent();
},
created: function () {
    this.createStyle();
},
methods: {
    keyEvent() {
        $(document).ready(function () {
            $('#basic, #media').keyup(function (e) {
                e.preventDefault();

                var basicCss = {
                    'width': '865px',
                    'position': 'relative',
                    'top': '0',
                    'left': '0',
                    'right': '-2.58333px',
                    'bottom': '-14px',
                    'height': '300px',
                    'z-index': 'auto'
                };
                var fullscreenCss = {
                    'position': 'fixed',
                    'width': 'auto',
                    'top': '0',
                    'left': '0',
                    'right': '0',
                    'bottom': '0',
                    'height': 'auto',
                    'z-index': '9999'
                };

                console.log("Key pressed " + e.key);
                var active = $(document.activeElement);
                var editor = active.parent().parent();

                if (e.which == 122) {
                    if (!editor.hasClass('activeFullScreen')) {
                        editor.addClass('activeFullScreen');
                        editor.css(fullscreenCss);
                    }
                }
                if (e.which == 27) {
                    if (editor.hasClass('activeFullScreen')) {
                        editor.removeClass('activeFullScreen');
                        editor.css(basicCss);
                    }
                }
            });
        });
    },
    updateBasicHtml(basicHtml) {
        console.log(basicHtml);
    },
    updateMediaHtml(mediaHtml) {
        console.log(mediaHtml);
    },
    createStyle() {
        $("#createStyleButton").on('click', () => {
            console.log('createStyle')
            var basicEditor = VueCodemirror.CodeMirror($('#basic').get(0));
            console.log(basicEditor.doc.getAllMarks()); //My tried method.
            return false;

        });
    }
}
})

window.vue = new Vue({
    el   : '#vue',
    props: [],
    data : () => {
        return {
        };
    },
});

Answer 1

Try to define your component using vue ref instead of id, like this:

<codemirror
    v-model="mediaHtml"
    :options="codeMirrorOptions"
    @input="updateMediaHtml(mediaHtml)"
    ref="basic"
></codemirror>

and in your "createStyle()" method, you should be able to do this:

this.$refs.basic.codemirror

Check this link: https://jsfiddle.net/u1f16q85/