How do I get 'No Results' to display when no results found

[canvasandcode]

I'm trying to understand how to show the No Results text to display, as it displays in the demo here:

https://darrenjennings.github.io/vue-autosuggest/

The code I'm using at the moment is very similar to your Codepen example from here: https://codesandbox.io/s/mjqrk7v2rx

I would assume I would check the array length of the results, and conditionally render a paragraph if the array is empty? But I'm sure there's a more elegant way and just wanted to check with you.

Thanks

[vlledo]

I would say that it is not as easy as expected.

Let me explain: If you have pre-filled suggestions and you use a computed method to filter them, you could easily achieve this. In this case, you could use the after-suggestions slot and check with v-if if the result of your computed method is returning results or not (if not, you could add your custom message inside it).

The problem comes when you are fetching your suggestions from an endpoint; In this case, you are populating your suggestions, instead of filtering them, every time the user changes the input value. In this scenario, you couldn't use the after-suggestions slot because when there are no suggestions, this slot is not rendered. In this case, the only way that I've found to add a "No results" message is based on the after-input slot.

I'm not sure if I'm missing something, but I would say that there are no more alternatives.

[vlledo]

Digging more into the code I've found a better solution based on the shouldRenderSuggestions method. Now I could render the after-suggestions slot with the "No results" message although there are no suggestions available.

[darrenjennings]

@vlledo shouldRenderSuggestions is the way to go here as you point out. Glad you got it working, as a "no results" message was the main reason I added this prop.