B4J Question [BANanoVuetifyAD3] vCard and vBtn

[Star-Dust]

I tried the 'Awesome Kitchen Sink' example and dwelt on vCard-1

I wondered how by clicking the MESSAGE button it is possible to identify which CARD has been clicked.

Sub buildteam
    Dim team As List
    team.Initialize
    team.Add(CreateMap("name": "Iyad", "role": "web developer", "avatar": "./assets/img1.png"))
    team.Add(CreateMap("name": "Reda", "role": "Graphic designer", "avatar": "./assets/img2.png"))
    team.Add(CreateMap("name": "Zineb", "role": "web developer", "avatar": "./assets/img3.png"))
    team.Add(CreateMap("name": "Hu TechGroup", "role": "Desktop developer", "avatar": "./assets/img4.png"))
    about.SetData("team", team) 
End Sub

Private Sub VBtn1_Click (e As BANanoEvent)
    '???'
End Sub

Private Sub VCard1_Click (e As BANanoEvent)
    '???
End Sub

 

[Mashiane]

Hey, I will look into this, we have has electricity cuts day in day out here and one cannot get anything done! The quicker way is to send stuff via the telegram channel at least thats on my phone (thats not an excuse though).

At least 24 hours for non-response will end in an hour from now, he he he.

 

[Mashiane]

@Star-Dust

This must be one of the best questions I have received. I will also update the kitchen sink to highlight the answer to this question and answer.

To cut a lot story short.., after banano loadlayout

VBtn1.OnClick("person.name")

and add this method.

Private Sub VBtn1_Click (item As Object)
    vuetify.ShowSwalInfo(item)
End Sub

 

[Mashiane]

Some back-ground to what is happening with this VCard Example

1. we create a list of objects ie. maps and store them in a data-variable named team.
2. We create layout with a container, a row and a column.
3. We tell the column that everything inside you, you need to re-create for each element in the "team" list.

4. So each child element will basically receive a "person" element. this includes the card, avatar etc. As an example, the avatar image SRC is bound to:

and VLabel2 caption is bound to

By default, button click events receive the (e As BANanoEvent) event listener. This case is however special, we want to pass the persons name as an argument to the click event. So we need to tell the btn event definition, that you are no longer receicing "e" but the "person.name" with

VBtn1.OnClick("person.name")

This you need to do after load-layout.

The V-For directive is one of the most powerful directives in VueJS to create multiple components at run-time without much hustles.

Great stuff. All the best!

 

[Star-Dust]

@Star-Dust

This must be one of the best questions I have received. I will also update the kitchen sink to highlight the answer to this question and answer.
]

Is there a prize for the best question?

Because I only ask better questions