Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'language')

Question

我对 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>

Answer 1

尝试将您的状态和计算属性移动到设置函数：

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