How to get the selected items for DataTable in ipyvuetify

Question

I'm using ipyvuetify and I still have some problems in understanding what v_modelstands for.

What I need is a table with selectable rows and a button that reads selected lines and return them when clicked. I tried the following code.

import ipyvuetify as v

headers = [
    {"text": "Name", "value": "name"},
    {"text": "Age", "value": "age"}
]
items = [
    {'name': 'Henri', 'age': 12},
    {'name': 'Etienne', 'age': 30},
    {'name': 'Matthieu', 'age': 40}
]

table = v.DataTable(
    v_model=[],
    show_select=True, 
    item_key = 'name', 
    headers=headers, 
    items=items,
)

show_selected_btn = v.Btn(color="primary",children=["Show selected"])

card_text = v.CardText(children = ['text'])
card = v.Card(children=[card_text])

def on_click(widget, event, data):
    card_text.children = table.v_model

show_selected_btn.on_event('click', on_click)

v.Layout(
    column=True,
    children=[table, show_selected_btn, card]
)

My problem is that, as a Vue.js point of view, I understood the v_model as a global JS variable that was possible to access at any moment, but it seems it's also linked to an object (the table here). I then tried table.v_model but that does not work.

I need to know what to place instead of v_model=[] and table.v_model and why. The ipyvuetify doc is light on that subjetc.

A last question : how to initialize a selected row? Select all rows at startup? Does that go to the v_model attribute also?

Regards.

Answer 1

You just have to change the value of v_model from:

v_model=[]

to

v_model='selected'

Then table.v_model will output the selected items.