Skip to content

Slots!!!

Compare
Choose a tag to compare
@darrenjennings darrenjennings released this 13 Aug 23:24
· 99 commits to master since this release
9e2c5df

Did someone say sloths?

Slots

You can now add header, footer and suggestion slots to vue-autosuggest components. This allows you to not have to use renderSuggestion and supercharges this component's api:

  • render elements are together so it's easier to read
  • easier for vue users and doesn't force users to think about createElement or JSX for suggestion styling
  • more control over header/footer

Usage would look like this:

<vue-autosuggest ...>
  <template slot="header">
    header slot content here
  </template>
  
  <template slot-scope="{suggestion}">
    <div v-if="suggestion.name === 'blog'">
      <a target="_blank" :href="suggestion.item.url">{{suggestion.item.value}}</a></div>
    <div v-else>{{suggestion.item}}</div>
  </template>

  <template slot="footer">
    footer content here
  </template>
</vue-autosuggest>

Docs in README:
https://github.com/Educents/vue-autosuggest#slots