Issue with VMenu using vuetify 3

[SebastienRietteMTO]

Hi,

I am brand new to trame, and I don't know if my problem is due to a bug or an error on my part.

I can't get the example https://github.com/Kitware/trame/blob/master/examples/02_vuetify/01_menu_v3.py to work. The button with the three dots appears fine, but nothing happens when I click on it. If I convert the example to vuetify2, everything works correctly (the menu with 'one', 'two' and 'three' appears) .

My versions are as follows:

• trame 3.12.0
• trame-client 3.11.2
• trame-common 1.1.1
• trame-dockview 1.3.0
• trame-server 3.10.0
• trame-vtk 2.10.2
• trame-vuetify 3.2.0

I've tested it with firefox 140.7.0esr et chromium 144.0.7559.96

Thank you for your help

[jourdain]

Thanks for reporting the issue. I think that example was updated from vue2 to vue3 without realizing the vuetify3 api has slightly changed.

I've updated the code in the repo with a better syntax. Also in order to figure out what was wrong, I looked at the Vuetify example here which was showing the following template example.

   <v-menu>
      <template v-slot:activator="{ props }">
        <v-btn
          color="primary"
          v-bind="props"
        >
          Activator slot
        </v-btn>
      </template>
      <v-list>
        <v-list-item
          v-for="(item, index) in items"
          :key="index"
          :value="index"
        >
          <v-list-item-title>{{ item.title }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>

But they had the following data

items = [
        { title: 'Click Me' },
        { title: 'Click Me' },
        { title: 'Click Me' },
        { title: 'Click Me 2' },
      ]

[SebastienRietteMTO]

Thank you very much for your quick response and code modification. Everything is working now.