0

我对使用 ipyvuetify 很陌生，我想知道实现条件渲染的最佳方法是什么。当我移动到仪表板上的另一个选项卡时，我希望能够使控件从导航侧边栏中消失。

类似行为的简单实现如下：

import ipyvuetify as v 

button1 = v.Btn(color='red', children = ['Submit 1'], style_ = 'width:30%')
button2 = v.Btn(color='blue', children = ['Submit 2'], style_ = 'width:30%')

def on_click(widget, event, data): 
    button1.disabled = True

button2.on_event('click', on_click)

v.Html(tag='div', class_='d-flex flex-column', children=[button1, button2])

而不是button1.disabled = True点击按钮时，我想一起删除/停止渲染控件。我认为一些实现v-if将是要走的路，但我似乎无法弄清楚。

有任何想法吗？

4

2 回答 2

1

您可以更改按钮容器的子项：

import ipyvuetify as v 

button1 = v.Btn(color='red', children = ['Submit 1'], style_ = 'width:30%')
button2 = v.Btn(color='blue', children = ['Submit 2'], style_ = 'width:30%')

def on_click(widget, event, data): 
    if button1 in my_buttons.children:
        my_buttons.children = [button2]
    else:
        my_buttons.children = [button1, button2]

button2.on_event('click', on_click)

my_buttons = v.Html(tag='div', class_='d-flex flex-column', children=[button1, button2])

my_buttons

注意：更改列表或字典时，请始终创建一个新实例。未检测到对现有实例的突变。

于 2021-02-09T17:05:56.100 回答
0

在这里回答我自己的问题。想出了一种方法来做到这一点，但可能有更好的方法。我更新了元素的 css display 属性button1.style_。

下面显示的是一种打开和关闭按钮的方法。毫无疑问，有更清洁的方法可以做到这一点。

button1 = v.Btn(color='red', children = ['Submit 1'], style_ = 'width:30%')
button2 = v.Btn(color='blue', children = ['Submit 2'], style_ = 'width:30%')

def on_click(widget, event, data): 
    
    if button1.style_ != 'display:none':
        button1.style_ = 'display:none'
    else: 
        button1.style_ = 'display:block; width:30%'
    

    
        
button2.on_event('click', on_click)

v.Html(tag='div', class_='d-flex flex-column', children=[button1, button2])
于 2021-02-07T13:44:50.843 回答