使用过滤器事件时,Justpy QSelect 不会在下拉列表中显示值

发布于 2025-01-09 06:55:32 字数 1308 浏览 1 评论 0原文

我一直在尝试在 Justpy 中创建一个过滤下拉菜单。我一直在使用 QSelect 组件来执行此操作。第二个下拉菜单这里是我想要的建造。

我可以使用输入事件获取下拉菜单来填充和显示我想要的值。我可以通过这种方式手动选择我想要的值。我的问题是当我使用过滤器事件时,下拉列表不再填充。相反,我看到一个旋转的“正在加载”图标。

这是我的代码:

import justpy as jp

dropdown_items = [123, 456, 789]

def filter_event(self, msg):
    # For testing purposes, just update the list of items in the dropdown to what was typed into dropdown
    new_items = [msg.value]
    self.options = new_items

def filter_test(request):
    wp = jp.QuasarPage(dark=True, tailwind=True, title="Filter Test Page")
    d1 = jp.QDiv(text="Select a number", classes="q-pa-md text-xl", style="max-width: 600px", a=wp)

    dropdown = jp.QSelect(label="Test dropdown", options=dropdown_items, multiple=True, use_input=True, clearable=True, use_chips=True, padding=True, bordered=True, a=d1)
    dropdown.on('filter', filter_event)

    return wp

jp.justpy(filter_test)

我尝试在事件处理程序中调用 Quasar 方法,例如:wp.dropdown.run_method(f'filter({msg.value})', msg.websocket),但这并没有改变任何事情。我尝试过使用不同的事件,填充不同的道具等等,但我还没有能够更接近。

也许我需要向 QSelect 组件添加一个模型,但我真的不知道它会是什么样子。

我想我错过了一些非常简单的东西。我没有任何使用 JavaScript 的经验,因此找到解决方案非常困难。非常感谢任何能让我更接近解决方案的提示或指导。谢谢。

I've been trying to create a filtering dropdown menu in Justpy. I've been using a QSelect component to do this. The second dropdown menu here is what I'd like to build.

I'm able to get the dropdown menu to populate and display the values I want using the input event. I can manually select the value I want this way. My issue is when I use the filter event, the dropdown no longer populates. Instead, I get a spinning "loading" icon.

Here is my code:

import justpy as jp

dropdown_items = [123, 456, 789]

def filter_event(self, msg):
    # For testing purposes, just update the list of items in the dropdown to what was typed into dropdown
    new_items = [msg.value]
    self.options = new_items

def filter_test(request):
    wp = jp.QuasarPage(dark=True, tailwind=True, title="Filter Test Page")
    d1 = jp.QDiv(text="Select a number", classes="q-pa-md text-xl", style="max-width: 600px", a=wp)

    dropdown = jp.QSelect(label="Test dropdown", options=dropdown_items, multiple=True, use_input=True, clearable=True, use_chips=True, padding=True, bordered=True, a=d1)
    dropdown.on('filter', filter_event)

    return wp

jp.justpy(filter_test)

I've tried calling Quasar methods within my event handler, for example: wp.dropdown.run_method(f'filter({msg.value})', msg.websocket), but that didn't change anything. I've experimented with using different events, filling in different props, etc., but I haven't been able to get any closer.

Perhaps I need to add a model to the QSelect component, but I don't really know what that would like like.

I assume I'm missing something very simple. I don't have any experience with JavaScript, so finding solutions has been very difficult. Any tips or guidance that'll get me closer to a solution is greatly appreciated. Thank you.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文