Spellcheck

The Spellcheck component allows to inform the user with a friendly message that he might have misspelled the search query. This message can be set using the default slot of the component, which gives access to the searched query using the query scope property, and the spellchecked query proposal, using the spellcheckedQuery scope property.

The component will only render itself if the spellcheckedQuery property has value.

Slots

Name	Description	Bindings (name - type - description)
default

Examples

This default spellcheck component expects a query and a spellcheckedQuery to render and pass to its default slot.

This two props should be show like a message comparing them.

Basic usage

<Spellcheck />

Customizing its contents

<Spellcheck>
  <template #default="{ query, spellcheckedQuery }">
    No results found for '{{ query }}'. We show you results for '{{ spellcheckedQuery }}'
  </template>
</Spellcheck>
<script>
  import { Spellcheck } from '@empathyco/x-components/search';
  export default {
    components: {
      Spellcheck
    }
  };
</script>