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

Question

我正在为 python 工作流创建一个与 ipyvuetify 的界面。有时我需要在 DataTable 中动态更改项目，但我无法设法更改它。

我创建了这个小用例来展示错误。 LEts 假设我们想要创建一个继承自 v.DataTable 的新 class。此数据table 将包含 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，但此更改不会反映在显示中。

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

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

toto.items = toto.items + [new_item]

table 变化，我也看到了之前添加的项目。

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

Answer 1

对于 Jupyter Widgets，您必须重新定义 .items。如果您附加到项目列表，小部件将看不到可变列表已被编辑。所以下面基本上是您在 class

之外建议的相同解决方案


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

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

how to dynamically add element to a DataTable ipyvuetify?

python

vuetify.js