如何动态地将元素添加到 DataTable ipyvuetify？

Question

我正在使用ipyvuetify 为python 工作流程创建一个接口。在某些时候，我需要动态更改 DataTable 中的项目，但我无法使其更改。

我创建了这个小用例来显示错误。让我们假设我们要创建一个继承自 v.DataTable 的新类。该数据表将有 3 个基础项目。在顶部的插槽中，我将添加一个 btn，当单击 btn 时，将一个元素添加到项目列表中：

import ipyvuetify as v

class CustomData(v.DataTable):
    
    def __init__(self):
    
        # create a btn to click on  
        
    
        # create the object 
        super().__init__()
        
         # a header 
        self.headers = [
            { 'text': 'Dessert (100g serving)', 'value': 'name'},
            { 'text': 'Calories', 'value': 'calories' },
            { 'text': 'Fat (g)', 'value': 'fat' },
            { 'text': 'Carbs (g)', 'value': 'carbs' },
            { 'text': 'Protein (g)', 'value': 'protein' },
            { 'text': 'Iron (%)', 'value': 'iron' },
        ]
        
        # 3 initial items
        self.items = [
            {
                'name': 'Frozen Yogurt',
                'calories': 159,
                'fat': 6.0,
                'carbs': 24,
                'protein': 4.0,
                'iron': '1%',
            },
            {
                'name': 'Ice cream sandwich',
                'calories': 237,
                'fat': 9.0,
                'carbs': 37,
                'protein': 4.3,
                'iron': '1%',
            },
            {
                'name': 'Eclair',
                'calories': 262,
                'fat': 16.0,
                'carbs': 23,
                'protein': 6.0,
                'iron': '7%',
            }
        ]
        
        # add a slot btn 
        self.btn = v.Btn(children=["click to add item"], color="primary", class_='ma-2')
        self.v_slots = [{
            'name': 'top',
            'children': self.btn
        }]
        
        # js behaviour 
        self.btn.on_event('click', self._on_click)
        
    def _on_click(self, widget, event, data):
        
        new_item = {
            'name': 'Cupcake',
            'calories': 305,
            'fat': 3.7,
            'carbs': 67,
            'protein': 4.3,
            'iron': '8%',
          }
        
        self.items.append(new_item)
        
        return self
toto = CustomData()
toto

现在，如果我单击 btn，该项目将添加到 toto.items，但此更改不会反映在显示中。

如果我尝试在课堂之外做同样的事情：

new_item = {
            'name': 'Cupcake',
            'calories': 305,
            'fat': 3.7,
            'carbs': 67,
            'protein': 4.3,
            'iron': '8%',
          }

toto.items = toto.items + [new_item] 

表格改变了，我也看到了之前添加的项目。

问题很简单，是什么触发了表的更新？

Answer 1

对于 Jupyter 小部件，您必须重新定义 .items。如果您附加到项目列表，则小部件无法看到可变列表已被编辑。因此，以下基本上是您在课堂之外建议的相同解决方案

class CustomData(v.DataTable):
    
    def __init__(self):
    
        # create a btn to click on  
        
    
        # create the object 
        super().__init__()
        
         # a header 
        self.headers = [
            { 'text': 'Dessert (100g serving)', 'value': 'name'},
            { 'text': 'Calories', 'value': 'calories' },
            { 'text': 'Fat (g)', 'value': 'fat' },
            { 'text': 'Carbs (g)', 'value': 'carbs' },
            { 'text': 'Protein (g)', 'value': 'protein' },
            { 'text': 'Iron (%)', 'value': 'iron' },
        ]
        
        # 3 initial items
        self.items = [
            {
                'name': 'Frozen Yogurt',
                'calories': 159,
                'fat': 6.0,
                'carbs': 24,
                'protein': 4.0,
                'iron': '1%',
            },
            {
                'name': 'Ice cream sandwich',
                'calories': 237,
                'fat': 9.0,
                'carbs': 37,
                'protein': 4.3,
                'iron': '1%',
            },
            {
                'name': 'Eclair',
                'calories': 262,
                'fat': 16.0,
                'carbs': 23,
                'protein': 6.0,
                'iron': '7%',
            }
        ]
        
        # add a slot btn 
        self.btn = v.Btn(children=["click to add item"], color="primary", class_='ma-2')
        self.v_slots = [{
            'name': 'top',
            'children': self.btn
        }]
        
        # js behaviour 
        self.btn.on_event('click', self._on_click)
        
    def _on_click(self, widget, event, data):
        
        new_item = {
            'name': 'Cupcake',
            'calories': 305,
            'fat': 3.7,
            'carbs': 67,
            'protein': 4.3,
            'iron': '8%',
          }
        
#         self.items.append(new_item)
        self.items = self.items + [new_item] 
        
        return self
toto = CustomData()
toto