How to bind a class on nav items in the navdrawer vuetify vuejs 3?

Question

I'm trying to bind a class to the list items of navbar based on specific condition.

The navbar items are as follows

const sections = ref([
{
    group: 'General',
    value: 'general',
    class: 'group-item',
    icon: generalIcon,
    items: [
      {
        icon: dashboardIcon,
        title: 'Dashboard',
        value: 'dashboard',
        path: 'dashboard',
        subItems: []
      },
      {
        icon: networkIcon,
        title: 'Network',
        value: 'network',
        path: 'network',
        subItems: []
      },
      {
        icon: calendarIcon,
        title: 'Time and Date',
        value: 'time_date',
        path: 'time-date',
        subItems: []
      },
      {
        icon: checkBoxIcon,
        title: 'Diagnostics',
        value: 'diagnostics',
        path: 'diagnostics',
        subItems: []
      },
      {
        icon: logsIcon,
        title: 'Logs',
        value: 'logs',
        path: 'logs',
        subItems: []
      },
      {
        icon: logsIcon,
        title: 'Tracelog',
        value: 'tracelog',
        path: 'tracelog',
        subItems: []
      },
      {
        icon: downloadIcon,
        title: 'Sw Upgrade',
        value: 'sw_upgrade',
        path: 'sw-upgrade',
        subItems: []
      },
      {
        icon: arrowIcon,
        title: 'Save/Restore',
        value: 'save_restore',
        path: 'save-restore',
        subItems: []
      }
    ]
  },
  {
    group: 'System',
    value: 'system',
    class: 'group-item',
    icon: systemIcon,
    items: [
      {
        icon: settingIcon,
        title: 'Set-Up',
        value: 'setup',
        path: 'set-up',
        subItems: []
      },
      {
        icon: wifiIcon,
        title: 'RFID Settings',
        value: 'rfid_settings',
        path: 'rfid-settings',
        subItems: []
      },
      {
        icon: testModeIcon,
        title: 'Test Mode',
        value: 'test_mode',
        path: 'test-mode',
        subItems: []
      }
    ]
  },
  {
    group: 'Reboot',
    value: 'reboot',
    class: 'group-item',
    icon: rebootIcon,
    items: []
  }
])

I'm trying to bind the class from the sections object to the v-list-item

    <v-list v-model:opened="open">
        <v-list-group
          class="mx-2"
          v-for="section in sections"
          :key="section.group"
          :value="section.group"
          @click="handleItemClick(section.group)" 
        >
          <template v-slot:activator="{ props }">

     
<v-list-item v-bind="props" :append-icon="null" class="mb-2" :class="{ section.class : groupcss}" :slim="true">

where 'groupcss' is

const groupcss = ref(true)

and 'group-item' is

.group-item {
  background-color: black;
  color: white;
  text-transform: capitalize !important;
}

What's wrong in the class binding part? I need this class binding to be done as I need to change the css when the condition is false

Answer 1

:class="{ section.class : groupcss}" is for applying a classname of literally "section.class". You need to bind the value of section.class which the documentation describes like so:

<v-list-item :class="[{ [section.class]: groupcss }]" />

This alternative syntax also works (which I think is maybe more intuitive):

<v-list-item :class="`{ ${section.class} : groupcss}`" />