開発環境

Vue: 2.6
CodeMirror: 5.49

問題

js部分

mounted() {
    CodeMirror.fromTextArea(document.getElementById("html-ed"), {
        mode: "htmlmixed",
        extraKeys: { "Ctrl-Space": "autocomplete" },
        lineNumbers: true,
        autoCloseTags: true,
        theme: "monokai"
    }).on("change", function(cm) {
        scope.html = cm.getValue();
    });
}

html部分

<textarea name="html" id="html-ed" class="mw" v-model="html"></textarea>

以上のようにVueのコンポーネントにおいてmount時にcodeMirrorをtextarea上に実装するコードを書いたのですが、うまく作成されません。

Vueのelementのrenderingのタイミングだと思われるのですが、mountedよりも遅く実行するlifecycleはないものでしょうか...?
nexttick内に書いてみても変わりませんでした...

行動規範の内容に同意します

回答1件

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>hoge</title>
6<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css" />
7<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/theme/monokai.css" />
8<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/addon/hint/show-hint.css" />
9<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.js"></script>
10<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/addon/hint/show-hint.js"></script>
11<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/mode/xml/xml.js"></script>
12<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/addon/hint/xml-hint.js"></script>
13<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/mode/css/css.js"></script>
14<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/addon/hint/css-hint.js"></script>
15<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/mode/javascript/javascript.js"></script>
16<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/addon/hint/javascript-hint.js"></script>
17<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/mode/htmlmixed/htmlmixed.js"></script>
18<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/addon/hint/html-hint.js"></script>
19
20<!-- 開発バージョン、便利なコンソールの警告が含まれています -->
21<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
22</head>
23<body>
24<div id="app">
25  <textarea name="html" id="htmled" v-model="html"></textarea>
26</div>
27<script>
28var app = new Vue({
29  el: '#app',
30  data() {
31    return({
32      html: ''
33    });
34  },
35  mounted() {
36    CodeMirror.fromTextArea(document.getElementById("htmled"), {
37      mode: "htmlmixed",
38      extraKeys: { "Ctrl-Space": "autocomplete" },
39      lineNumbers: true,
40      autoCloseTags: true,
41      theme: "monokai"
42    }).on("change", (cm) => {
43// エラーになるのでコメント
44//      scope.html = cm.getValue();
45    });
46  }
47});
48</script>
49</body>
50</html>