having trouble implementing the "boldenSuggestion" example

[ljm42]

I'm submitting a ...

• bug report
• feature request
• support request / documentation request

What is the current behavior?

I am trying to implement the "boldenSuggestion" example from the docs, but I'm having issues with this.$refs.suggestComponent not being defined:

Error in render: "TypeError: this.$refs.suggestComponent is undefined"

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem

Below is the code where I added the "suggestion-item" slot and the boldenSuggestion() js code to the "Simple example" from the docs:

<!-- Some component.vue -->
<template>
  <div>
    <vue-simple-suggest v-model="chosen" :list="simpleSuggestionList" :filter-by-query="true">
      <div slot="suggestion-item" slot-scope="scope">
        <span v-html="boldenSuggestion(scope)"></span>
      </div>
    </vue-simple-suggest>

    <br>

    <p>Chosen element: {{ chosen }}</p>
  </div>
</template>

<script>
import VueSimpleSuggest from 'vue-simple-suggest'
import 'vue-simple-suggest/dist/styles.css' // Optional CSS

export default {
  components: {
    VueSimpleSuggest
  },
  data() {
    return {
      chosen: ''
    }
  },
  methods: {
    simpleSuggestionList() {
      return [
        'Vue.js',
        'React.js',
        'Angular.js'
      ]
    },
    boldenSuggestion(scope) {
      if (!scope) return scope;
      const { suggestion, query } = scope;
      let result = this.$refs.suggestComponent.displayProperty(suggestion);
      if (!query) return result;
      const texts = query.split(/[\s-_/\\|\.]/gm).filter(t => !!t) || [''];
      return result.replace(new RegExp('(.*?)(' + texts.join('|') + ')(.*?)', 'gi'), '$1<b>$2</b>$3');
    }

  }
}
</script>

When typining the input box, no suggestions are shown and the following JS error is thrown in Firefox:

  Error in render: "TypeError: this.$refs.suggestComponent is undefined"

and Chrome:

TypeError: Cannot read property 'displayProperty' of undefined

What is the expected behavior?

To see the suggestion list with the query highlighted

How are you importing Vue-simple-suggest?

• ESNext (original code, single-file .vue component, css included) (import VueSimpleSuggest from 'vue-simple-suggest/lib')
• ES6 (import VueSimpleSuggest from 'vue-simple-suggest')
• ES7 and above (import VueSimpleSuggest from 'vue-simple-suggest/dist/es7')
• Bundled version (import VueSimpleSuggest from 'vue-simple-suggest')
• CommonJS (const VueSimpleSuggest = require('vue-simple-suggest'))
• UMD Component (<script type="text/javascript" src="https://unpkg.com/vue-simple-suggest"></script>)

Please tell us about your environment:

• Vue.js Version: 3.0.1
• Vue-simple-suggest version: 1.8.2
• Browser: [all | Chrome 68 | Firefox 62]
• Language: [all | ES6/7 | ES5 ]

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

[kaskar2008]

@ljm42 You simply forgot to add a ref attribute to the component, like this:
<vue-simple-suggest ref="suggestComponent" ...>

[ljm42]

aha! Thank you very much!