v-if在ipyvuetify中的实现

Question

我对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的一些实现是可行的，但我似乎无法弄清楚。

有什么想法吗？

Answer 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

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

Answer 2

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

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

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])