我對 Vue 和 JavaScript 很陌生，所以我想這是一個非常簡單的解決方法。這里有類似的帖子，但我實施的那些解決方案并沒有解決問題。
我能夠利用 CodeMirror 庫來獲取代碼板，以及一個 HTML 下拉串列，其中包含可供選擇的語言（沒有功能）。
從那里，給定下拉串列中選擇的語言，我試圖更新語言欄位，基于我看到的其他人實作 CodeMirror 的一些示例。
知道發生了什么嗎？任何幫助將不勝感激。
<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>
uj5u.com熱心網友回復：
嘗試將您的狀態和計算屬性移動到設定函式：
export default {
components: {
Codemirror,
},
setup() {
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;
});
return {
extensions, state,
log: console.log,
};
},
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/494816.html
標籤：javascript Vue.js Vue组件 Vuejs3 代码镜像