how to use codemirror's show-hint in vue

[2450184176]

one problem happened in my project：

1. 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(…)

[surmon-china]

@2450184176

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

[BH-NOTHING]

@surmon-china There is also a small problem,codemirror will automatical selecte hint every time.If I want to write 'fua',however what i get is 'functiona'

[BH-NOTHING]

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

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

[2450184176]

you both great!!!

[wjhcc2018]

https://jsfiddle.net/dzw6zb72/ cm 里面没有 showHint，报 showHint 未定义呀

[surmon-china]

@wjhcc2018 import some resource with show-hint

[surmon-china]

@BH-NOTHING nice!

[weinipaodekuai]

groovy 代码提示不支持吗？

[vmato]

        onCmReady(cm) {
            console.log('the editor is ready', cm);
            cm.on('keypress', () => {
                alert(1)
                //cm.showHint()
            })
        },

getting "cm.on is not a function"

console:

the editor is ready Object { state: {…}, view: {…}, container: div#cme.v-codemirror }