Vue-Codemirror组件options不生效求助：lineNumbers设置无效

问题根源 #

1. options绑定错误：你模板里写的options="{ mode: 'javascript', lineNumbers: false}"是字符串格式，不是动态绑定的JavaScript对象，组件无法解析其中的配置项，等于没设置行号隐藏。
2. v6配置逻辑变更：Vue-Codemirror v6已经用extensions管理语法、主题这类扩展，options里的mode属于冗余写法，还会和extensions里的javascript()产生冲突。

修复步骤 #

1. 修正模板的options绑定

给options加上冒号:options，把它变成动态绑定的对象，同时删掉没用的mode配置：

<div>
  <Codemirror v-model="code" :options="{ lineNumbers: false }" :extensions="extensions" />
</div>

2. 保留正确的扩展配置

你脚本里的extensions已经正确引入了JavaScript语法和One Dark主题，不需要修改，维持原样即可：

import { Codemirror } from 'vue-codemirror'
import { javascript } from "@codemirror/lang-javascript";
import { oneDark } from "@codemirror/theme-one-dark";

export default {
  components: {
    Codemirror
  },
  data() {
    return {
      extensions: [javascript(), oneDark],
      code: 'text\nsadasd\nsadjasopdjops\ndaksdas',
    }
  },
}

可选：动态控制行号显示

如果需要后期切换行号的显示状态，可以把lineNumbers改成响应式变量：

<Codemirror v-model="code" :options="{ lineNumbers: showLineNums }" :extensions="extensions" />

data() {
  return {
    showLineNums: false, // 初始隐藏行号
    extensions: [javascript(), oneDark],
    code: 'text\nsadasd\nsadjasopdjops\ndaksdas',
  }
}

内容的提问来源于stack exchange，提问作者Lucián Zeman