Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature Request] Support dynamic items #4

Open
pactode opened this issue Nov 18, 2022 · 7 comments
Open

[Feature Request] Support dynamic items #4

pactode opened this issue Nov 18, 2022 · 7 comments

Comments

@pactode
Copy link

pactode commented Nov 18, 2022

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
Copy link
Owner

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
Copy link
Author

pactode commented Nov 18, 2022

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

@xiaoluoboding
Copy link
Owner

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: 96bbc41

Maybe fixed the problem why do not render the item

@pactode
Copy link
Author

pactode commented Nov 22, 2022

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
Copy link

0xnio commented May 9, 2023

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
Copy link
Author

pactode commented May 10, 2023

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants