Use custom icons for List Checkbox State

[Greendogo]

I have a list which controls the visibility of other items in my application. I use the icons: "mdi mdi-eye" and "mdi mdi-eye-off" icons to dilineate the "on" and "off" state of the checkbox in the list. I control the icons in a computed list like this:

const listItems = computed(()=>[
    {
        "label": "Show All",
        "value": -1,
        "icon":  listSelection.includes(-1) ? 'mdi mdi-eye' : 'mdi mdi-eye-off'
    },
    {
        "label": "Item 1",
        "value": 1,
        "icon":  listSelection.includes(1) ? 'mdi mdi-eye' : 'mdi mdi-eye-off'
    },
    {
        "label": "Item 2",
        "value": 2,
        "icon":  listSelection.includes(2) ? 'mdi mdi-eye' : 'mdi mdi-eye-off'
    },
    {
        "label": "Item 3",
        "value": 3,
        "icon":  listSelection.includes(3) ? 'mdi mdi-eye' : 'mdi mdi-eye-off'
    }
]);

How listItems and listSelection are used in the elements.

    <w-menu
      top
      custom
      persistent
      shadow
    >
      <template #activator="{ on }">
        <w-button
          outline
          color="primary"
          v-on="on"
        >
          Show/Hide Items
        </w-button>
      </template>
      <w-list
        v-model="listSelection"
        class="white--bg"
        :items="listItems"
        item-class="px8"
        multiple
        @item-select="toggleItem($event)"
      >
        <template #item="{ item }">
          <span grow>
            <w-icon md>
              {{ item.icon }}
            </w-icon>
            <span class="spacer" />
            <span class="ml2" > {{ item.label }}</span>
          </span>
        </template>
      </w-list>
    </w-menu>

However, while the "w-list" element is open, even though the computed variable listItems is correctly updated upon selection change, it does not change visibly. Closing the "w-list" element (which is inside of a "w-menu" element) and reopening it corrects the icon to what they should be. I'd rather these icons be updated while the "w-list" is rendered. The easiest way I can think to create this functionality is to allow some custom checkboxes by passing two icons instead.

[antoniandre]

Hi @Greendogo, Can you give a reproduction link for this? A Codepen would be perfect. You could start from this one: https://codepen.io/antoniandre/pen/mdPNYaL Thanks

[Greendogo]

I use the composition API so I'm having an issue getting codepen + waveUI + composition API to work together. Any suggestions?

[antoniandre]

Hi @Greendogo, you can use https://codepen.io/antoniandre/pen/YzEobVq to share a repro with Vue 3 and composition API :) But I have created a demo where I show you a working alternative how I would do it. https://codepen.io/antoniandre/pen/ZEvxBZM?editors=1010

In the meantime I will investigate what's going on. :)

[antoniandre]

Now fixed in version 2.32.1. But if you use the way I shared, the cosmetic stays in the template, and you don't need a computed at all. :)

[Greendogo]

Thanks for the codepen to share Vue 3 and composition API stuff. That's really helpful and could be useful in the future for bugs and feature requests.