Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

how to use codemirror's show-hint in vue

See original GitHub issue

one problem happened in my project：

you can see my code,following:

<template>
    <div class="main">
        <codemirror ref="myCm"
                    :value="code"
                    :options="cmOptions"
                    @ready="onCmReady"
                    @focus="onCmFocus"
                    @changes="onChange"
                    @input="onCmCodeChange">
        </codemirror>
    </div>
</template>


<script>
import 'codemirror/theme/base16-dark.css';
import 'codemirror/addon/hint/show-hint.css';
import 'codemirror/lib/codemirror';
import 'codemirror/mode/sql/sql';
import 'codemirror/addon/hint/show-hint';
import 'codemirror/addon/search/searchcursor';
import 'codemirror/addon/search/search';
import 'codemirror/addon/display/placeholder';
import 'codemirror/addon/hint/sql-hint';
import 'codemirror/addon/hint/anyword-hint';


export default {
  data() {
    return {
      code: 'select * from yjyj.supermarketdata limit 100;',
      cmOptions: {
        lineNumbers: true,
        indentUnit: 4,
        autofocus: true,
        styleActiveLine: true,
        matchBrackets: true,
        mode: 'text/x-mysql',
        lineWrapping: true,
        theme: 'default',
        extraKeys: {
          Ctrl: 'autocomplete',
        },
        foldGutter: true,
        placeholder: "Please end with ';'",
      },
    };
  },
  methods: {
    onCmReady(cm) {
      console.log('the editor is readied!', cm);
    },
    onCmFocus() {
    },
    onCmCodeChange(newCode) {
      this.code = newCode;
    },
    onChange() {
      this.codemirror.showHint();
    },
  },
  computed: {
    codemirror() {
      return this.$refs.myCm.codemirror;
    },
  },
  mounted() {
  },
};
</script>

<style scoped lang="scss">
    .main{
        margin-top: 20px;
    }
</style>

2.then it occurs error,following:

vue.runtime.esm.js?2b0e:587 [Vue warn]: Error in event handler for "changes": "RangeError: Maximum call stack size exceeded"

found in

---> <Codemirror>
       <Main> at src\views\page\main.vue
         <Layout> at src\views\layout.vue
           <ElMain>
             <ElContainer>
               <App> at src\App.vue
                 <Root>warn @ vue.runtime.esm.js?2b0e:587logError @ vue.runtime.esm.js?2b0e:1733globalHandleError @ vue.runtime.esm.js?2b0e:1728handleError @ vue.runtime.esm.js?2b0e:1717Vue.$emit @ vue.runtime.esm.js?2b0e:2536(anonymous function) @ vue-codemirror.js?8f94:1signal @ codemirror.js?56b3:1156endOperation_finish @ codemirror.js?56b3:3857endOperations @ codemirror.js?56b3:3758(anonymous function) @ codemirror.js?56b3:3741finishOperation @ codemirror.js?56b3:2119endOperation @ codemirror.js?56b3:3738(anonymous function) @ codemirror.js?56b3:3875makeChange @ codemirror.js?56b3:5189replaceRange @ codemirror.js?56b3:5415createObj.replaceRange @ codemirror.js?56b3:6082(anonymous function) @ codemirror.js?56b3:9635Completion.pick @ show-hint.js?9b74:86Completion.finishUpdate @ show-hint.js?9b74:128(anonymous function) @ show-hint.js?9b74:114(anonymous function) @ show-hint.js?9b74:377fetchHints @ show-hint.js?9b74:365run @ show-hint.js?9b74:376resolved @ show-hint.js?9b74:381fetchHints @ show-hint.js?9b74:361Completion.update @ show-hint.js?9b74:113(anonymous function) @ show-hint.js?9b74:46onChange @ main.vue?5faf:60invoker @ vue.runtime.esm.js?2b0e:2023Vue.$emit @ vue.runtime.esm.js?2b0e:2534(anonymous function) @ vue-codemirror.js?8f94:1signal @ codemirror.js?56b3:1156endOperation_finish @ codemirror.js?56b3:3857endOperations @ codemirror.js?56b3:3758(anonymous function) @ codemirror.js?56b3:3741finishOperation @ codemirror.js?56b3:2119endOperation @ codemirror.js?56b3:3738(anonymous function) @ codemirror.js?56b3:3875makeChange @ codemirror.js?56b3:5189replaceRange @ codemirror.js?56b3:5415createObj.replaceRange @ codemirror.js?56b3:6082(anonymous function) @ codemirror.js?56b3:9635Completion.pick @ show-hint.js?9b74:86Completion.finishUpdate @ show-hint.js?9b74:128(anonymous function) @ show-hint.js?9b74:114(anonymous function) @ show-hint.js?9b74:377fetchHints @ show-hint.js?9b74:365run @ show-hint.js?9b74:376resolved @ show-hint.js?9b74:381fetchHints @ show-hint.js?9b74:361Completion.update @ show-hint.js?9b74:113(anonymous function) @ show-hint.js?9b74:46onChange @ main.vue?5faf:60invoker @ vue.runtime.esm.js?2b0e:2023Vue.$emit @ vue.runtime.esm.js?2b0e:2534(anonymous function) @ vue-codemirror.js?8f94:1signal @ codemirror.js?56b3:1156endOperation_finish @ codemirror.js?56b3:3857endOperations @ codemirror.js?56b3:3758(anonymous function) @ codemirror.js?56b3:3741finishOperation @ codemirror.js?56b3:2119endOperation @ codemirror.js?56b3:3738(anonymous function) @ codemirror.js?56b3:3875makeChange @ codemirror.js?56b3:5189replaceRange @ codemirror.js?56b3:5415createObj.replaceRange @ codemirror.js?56b3:6082(anonymous function) @ codemirror.js?56b3:9635Completion.pick @ show-hint.js?9b74:86Completion.finishUpdate @ show-hint.js?9b74:128(anonymous function) @ show-hint.js?9b74:114(anonymous function) @ show-hint.js?9b74:377fetchHints @ show-hint.js?9b74:365run @ show-hint.js?9b74:376resolved @ show-hint.js?9b74:381fetchHints @ show-hint.js?9b74:361Completion.update @ show-hint.js?9b74:113(anonymous function) @ show-hint.js?9b74:46onChange @ main.vue?5faf:60invoker @ vue.runtime.esm.js?2b0e:2023Vue.$emit @ vue.runtime.esm.js?2b0e:2534(anonymous function) @ vue-codemirror.js?8f94:1signal @ codemirror.js?56b3:1156endOperation_finish @ codemirror.js?56b3:3857endOperations @ codemirror.js?56b3:3758(anonymous function) @ codemirror.js?56b3:3741finishOperation @ codemirror.js?56b3:2119endOperation @ codemirror.js?56b3:3738(anonymous function) @ codemirror.js?56b3:3875makeChange @ codemirror.js?56b3:5189replaceRange @ codemirror.js?56b3:5415createObj.replaceRange @ codemirror.js?56b3:6082(anonymous function) @ codemirror.js?56b3:9635Completion.pick @ show-hint.js?9b74:86Completion.finishUpdate @ show-hint.js?9b74:128(anonymous function) @ show-hint.js?9b74:114(anonymous function) @ show-hint.js?9b74:377fetchHints @ show-hint.js?9b74:365run @ show-hint.js?9b74:376resolved @ show-hint.js?9b74:381fetchHints @ show-hint.js?9b74:361Completion.update @ show-hint.js?9b74:113(anonymous function) @ show-hint.js?9b74:46onChange @ main.vue?5faf:60invoker @ vue.runtime.esm.js?2b0e:2023Vue.$emit @ vue.runtime.esm.js?2b0e:2534(anonymous function) @ vue-codemirror.js?8f94:1signal @ codemirror.js?56b3:1156endOperation_finish @ codemirror.js?56b3:3857endOperations @ codemirror.js?56b3:3758(anonymous function) @ codemirror.js?56b3:3741finishOperation @ codemirror.js?56b3:2119endOperation @ codemirror.js?56b3:3738(anonymous function) @ codemirror.js?56b3:3875makeChange @ codemirror.js?56b3:5189replaceRange @ codemirror.js?56b3:5415createObj.replaceRange @ codemirror.js?56b3:6082(anonymous function) @ codemirror.js?56b3:9635Completion.pick @ show-hint.js?9b74:86Completion.finishUpdate @ show-hint.js?9b74:128(anonymous function) @ show-hint.js?9b74:114(anonymous function) @ show-hint.js?9b74:377fetchHints @ show-hint.js?9b74:365run @ show-hint.js?9b74:376resolved @ show-hint.js?9b74:381fetchHints @ show-hint.js?9b74:361Completion.update @ show-hint.js?9b74:113(anonymous function) @ show-hint.js?9b74:46onChange @ main.vue?5faf:60invoker @ vue.runtime.esm.js?2b0e:2023Vue.$emit @ vue.runtime.esm.js?2b0e:2534(anonymous function) @ vue-codemirror.js?8f94:1signal @ codemirror.js?56b3:1156endOperation_finish @ codemirror.js?56b3:3857endOperations @ codemirror.js?56b3:3758(anonymous function) @ codemirror.js?56b3:3741finishOperation @ codemirror.js?56b3:2119endOperation @ codemirror.js?56b3:3738(anonymous function) @ codemirror.js?56b3:3875makeChange @ codemirror.js?56b3:5189replaceRange @ codemirror.js?56b3:5415createObj.replaceRange @ codemirror.js?56b3:6082(anonymous function) @ codemirror.js?56b3:9635Completion.pick @ show-hint.js?9b74:86Completion.finishUpdate @ show-hint.js?9b74:128(anonymous function) @ show-hint.js?9b74:114(anonymous function) @ show-hint.js?9b74:377fetchHints @ show-hint.js?9b74:365run @ show-hint.js?9b74:376resolved @ show-hint.js?9b74:381fetchHints @ show-hint.js?9b74:361Completion.update @ show-hint.js?9b74:113(anonymous function) @ show-hint.js?9b74:46onChange @ main.vue?5faf:60invoker @ vue.runtime.esm.js?2b0e:2023Vue.$emit @ vue.runtime.esm.js?2b0e:2534(anonymous function) @ vue-codemirror.js?8f94:1signal @ codemirror.js?56b3:1156endOperation_finish @ codemirror.js?56b3:3857endOperations @ codemirror.js?56b3:3758(anonymous function) @ codemirror.js?56b3:3741finishOperation @ codemirror.js?56b3:2119endOperation @ codemirror.js?56b3:3738(anonymous function) @ codemirror.js?56b3:3875makeChange @ codemirror.js?56b3:5189replaceRange @ codemirror.js?56b3:5415createObj.replaceRange @ codemirror.js?56b3:6082(anonymous function) @ codemirror.js?56b3:9635Completion.pick @ show-hint.js?9b74:86Completion.finishUpdate @ show-hint.js?9b74:128(anonymous function) @ show-hint.js?9b74:114(anonymous function) @ show-hint.js?9b74:377fetchHints @ show-hint.js?9b74:365run @ show-hint.js?9b74:376resolved @ show-hint.js?9b74:381fetchHints @ show-hint.js?9b74:361Completion.update @ show-hint.js?9b74:113(anonymous function) @ show-hint.js?9b74:46onChange @ main.vue?5faf:60invoker @ vue.runtime.esm.js?2b0e:2023Vue.$emit @ vue.runtime.esm.js?2b0e:2534(anonymous function) @ vue-codemirror.js?8f94:1signal @ codemirror.js?56b3:1156endOperation_finish @ codemirror.js?56b3:3857endOperations @ codemirror.js?56b3:3758(anonymous function) @ codemirror.js?56b3:3741finishOperation @ codemirror.js?56b3:2119endOperation @ codemirror.js?56b3:3738(anonymous function) @ codemirror.js?56b3:3875makeChange @ codemirror.js?56b3:5189replaceRange @ codemirror.js?56b3:5415createObj.replaceRange @ codemirror.js?56b3:6082(anonymous function) @ codemirror.js?56b3:9635Completion.pick @ show-hint.js?9b74:86Completion.finishUpdate @ show-hint.js?9b74:128(anonymous function) @ show-hint.js?9b74:114(anonymous function) @ show-hint.js?9b74:377fetchHints @ show-hint.js?9b74:365run @ show-hint.js?9b74:376resolved @ show-hint.js?9b74:381fetchHints @ show-hint.js?9b74:361
vue.runtime.esm.js?2b0e:1737 RangeError: Maximum call stack size exceeded(…)

Issue Analytics

State:
Created 5 years ago
Comments:8 (3 by maintainers)

Top GitHub Comments

20reactions

surmon-chinacommented, Apr 20, 2018

@2450184176

onCmReady(cm) {
    cm.on('keypress', () => {
        cm.showHint()
    })
}

3reactions

BH-NOTHINGcommented, Nov 2, 2018

ok，After scaning the source code,i solved it by adding {completeSingle:false}

onCmReady(cm) {
    cm.on('keypress', () => {
        cm.showHint({completeSingle:false})
    })
}

Top Results From Across the Web

vue-codemirror - npm

CodeMirror code editor component for Vue. Latest version: 6.1.1, last published: 4 months ago. Start using vue-codemirror in your project by ...

Vue and Codemirror Example - CodePen

You can use the CSS from another Pen by using its URL and the proper URL extension.

vue-codemirror examples - CodeSandbox

Learn how to use vue-codemirror by viewing and forking example apps that make use of vue-codemirror on CodeSandbox. ; docsA Quasar Framework app...

Vue.js mode - CodeMirror

<template> <div class="sass">I'm a {{mustache-like}} template</div> </template> <script lang="coffee"> module.exports = props: ['one', 'two', 'three']

How to Learn Vue Codemirror Lite for Vue.js - Vue-view

CodeMirror is a Component For Vue.js. All modes and addons are not included by default (to optimize package size). See Language Modes and...