Jquery 如何在vue中选择codemirror实例

我有两个codemirror实例，我想从中选择一个，我该怎么做

我已经尝试过

var basicEditor=vuecodemirro.CodeMirror（$（'#basic'）.get（0））但它不起作用

这是我的密码

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 {
        };
    },
});

Vue.use（window.vuecodemerror）；
Vue.component（'编辑'{
数据：函数（）{
返回{
basicHtml:“”，
mediaHtml:“”，
代码镜像选项：{
tabSize:4，
行号：对，
台词:对,，
模式：“文本/x-scss”，
排水沟：[“CodeMirror lint markers”]，
林特：没错，
是的，
自动关闭括号：正确
},
}
},
模板：`
基本风格
媒体查询

`，
挂载：函数（）{
这个.keyEvent（）；
},
已创建：函数（）{
这个.createStyle（）；
},
方法：{
keyEvent（）{
$（文档）.ready（函数（）{
$（“#基本，#媒体”）.keyup（函数（e）{
e、 预防默认值（）；
var basicCss={
“宽度”：“865px”，
'位置'：'相对'，
“顶部”：“0”，
“左”：“0”，
'右'：'-2.58333px'，
'底部'：'-14px'，
“高度”：“300px”，
“z索引”：“自动”
};
var fullscreenCss={
'位置'：'固定'，
“宽度”：“自动”，
“顶部”：“0”，
“左”：“0”，
“右”：“0”，
“底部”：“0”，
“高度”：“自动”，
“z索引”：“9999”
};
控制台日志（“按键按下”+e键）；
var active=$（document.activeElement）；
var editor=active.parent（）.parent（）；
如果（e.which==122）{
如果（！editor.hasClass（'activeFullScreen'））{
addClass（'activeFullScreen'）；
css（全屏css）；
}
}
如果（e.which==27）{
if（editor.hasClass（'activeFullScreen'））{
removeClass（'activeFullScreen'）；
css（basicCss）；
}
}
});
});
},
updateBasicHtml（基本HTML）{
console.log（basicHtml）；
},
updateMediaHtml（mediaHtml）{
log（mediaHtml）；
},
createStyle（）{
$（“#createStyleButton”）。在（'单击'，（）=>{
console.log（'createStyle'）
var basicEditor=vuecodemiror.codemirr（$（'#basic'）.get（0））；
console.log（basicEditor.doc.getAllMarks（））；//我尝试过的方法。
返回false；
});
}
}
})
window.vue=新的vue({
el:“#vue”，
道具：[]，
数据：（）=>{
返回{
};
},
});
尝试使用vue ref而不是id定义组件，如下所示：

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

检查此链接：
您知道如何获取新值吗？我有一个带有初始代码的变量，希望将新代码保存在另一个变量中。对于@input，它不适用于我，它表示未定义。
this.$refs.basic.codemirror