How to load codemirror when is hidden behind a tab

If codemirror is inside a tab, when you click the tab, by default it won’t load. Fix as follows:

<tabs>
  <tab @click="refreshCodemirror">
    <codemirror
      ref="codeMirrorField1"
      v-model="field"
      :options="cmOptions" />
  </tab>
  <tab @click="refreshCodemirror">
    <codemirror
      ref="codeMirrorField2"
      v-model="field2"
      :options="cmOptions" />
  </tab>
</tabs>
  
import Vue from 'vue'

export default {
  methods: {
    refreshCodemirror () {
      Vue.nextTick(() => {
        for (const $ref in this.$refs) {
          if (this.$refs[$ref].hasOwnProperty('codemirror')) {
            this.$refs[$ref].codemirror.refresh() // IMPORTANT CODE HERE
          }
        }
      })
    }
  }
}

[zedee]

@Pedrat I also had this issue and I’m using Vuetify tabs as well.

The architecture of my application makes a bit cumbersome to “communicate” to children component the active tab and trigger conditional re-render (because I have lots of tabs and sub-tabs), so this alternative solution worked for me.

From official docs: https://codemirror.net/doc/manual.html#addon_autorefresh From Stack Overflow: https://stackoverflow.com/questions/8349571/codemirror-editor-is-not-loading-content-until-clicked

You will need to add in your component file the following line before the export default { ... } :

import "codemirror/addon/display/autorefresh.js";

And then into your cmOptions, add this key/value:

autoRefresh: true

It worked for me, so it should for you as well!

[surmon-china]

Try to use v-if to control component re-rendering when the container’s explicit state is switched, or manually call the component’s refresh method.