[Feature Request] Support dynamic items

[pactode]

trafficstars

It currently does not work, when you dynamically add Command.Item to a Command.List or Command.Group.

Any way to support this?

The use case is that you would like to send your query to a backend, that responds with X results to display.

Let me know if you need any help looking into it.

[xiaoluoboding]

I guess you want to render a list

check it out:

https://github.com/xiaoluoboding/vue-command-palette/blob/main/src/components/command/vercel/Home.vue#L5

You can compose the components whatever you want.

[pactode]

The goal is to have a combined local search of commands with backend driven search results within the command palette. However, it does not render the dynamic items within the list.

For instance, if you try adjusting your example to render items filtered based on your input query. It does not render the items properly. Here's a link to my commit adjusting the vercel example: https://github.com/pactode/vue-command-palette/commit/9bf64de2e85dda5fe74c2b3fc1d8de4a8472da2b

[xiaoluoboding]

The goal is to have a combined local search of commands with backend driven search results within the command palette. However, it does not render the dynamic items within the list.

For instance, if you try adjusting your example to render items filtered based on your input query. It does not render the items properly. Here's a link to my commit adjusting the vercel example: pactode@9bf64de

Check out the commit: https://github.com/xiaoluoboding/vue-command-palette/commit/96bbc4112339e4a25d928ca7d86a49181e3911f8

Maybe fixed the problem why do not render the item

[pactode]

Thanks for looking into this, but it still does not render correctly. Some times the item you are searching for just disappears.

It seems to be caused by the isRender computed on Command.Item returning false.

When inspecting the components with Vue devtools, it seems that the itemId on Command.Item is not matching the key within filtered.items. Not sure why though.

[0xnio]

Did you find a solution to this? I also can't seem to get items dynamically rendered based on results from a query to a backend search.

[pactode]

Did you find a solution to this? I also can't seem to get items dynamically rendered based on results from a query to a backend search.

I ended up building a custom version of the command palette instead of using this package.

[gsabater]

Like pactode I ended building a custom version of the command palette, but using this package as base. I'll leave the answer here in case it can help someone else.

Instead of using <Command.Input use an input with the same styling. This will disable filtering on items. Then you can just make a simple v-for on the <Command.Item and implement your server or local logic.

This is a working example in case anyone needs to take a look https://github.com/gsabater/backlog.rip/blob/master/components/search/palette.vue