Soy muy nuevo en Vue y JavaScript, así que imagino que esta es una solución realmente simple. Hay publicaciones similares aquí, pero las soluciones que implementé no solucionaron el problema.

Pude utilizar la biblioteca CodeMirror para obtener un tablero de códigos, así como un menú desplegable HTML con idiomas para seleccionar (sin funcionar).

A partir de ahí, dado el idioma seleccionado en el menú desplegable, intenté actualizar el campo de idioma, según algunos ejemplos que he visto de otros implementando CodeMirror.

¿Alguna idea de lo que está pasando? Cualquier ayuda sería muy apreciada.

 <script> import { Codemirror } from "vue-codemirror"; import { javascript } from "@codemirror/lang-javascript"; import { python } from "@codemirror/lang-python"; import { oneDark } from "@codemirror/theme-one-dark"; import { reactive, computed } from "vue"; const themes = { oneDark }; const languages = { javascript: javascript(), python: python(), }; const state = reactive({ language: "python", theme: "oneDark", }); const extensions = computed(() => { const result = []; result.push(languages[state.language]); if (themes[state.theme]) { result.push(themes[state.theme]); } return result; }); export default { components: { Codemirror, }, setup() { return { extensions, log: console.log, }; }, }; </script> <template> <div class="toolbar"> <pre class="state">{{ state }}</pre> <div class="config"> <p> <label for="language">language:</label> <select name="language" id="language" v-model="state.language"> <option :value="option" :key="option" v-for="option in ['python', 'javascript']" > {{ option }} </option> </select> </p> </div> </div> <codemirror v-model="code" placeholder="" :style="{ height: '400px' }" :autofocus="true" :indent-with-tab="true" :tab-size="2" :extensions="extensions" @ready="log('ready', $event)" @change="log('change', $event)" @focus="log('focus', $event)" @blur="log('blur', $event)" /> </template>