Menu icon change

[Freddster]

I am trying to change the icon on a menu item, when that item is pressed.
So far I have managed to assign the icon to a variable and change this, but the change is not propagated out to the final menu, which means that the icon does not change.

I hope someone is able to tell me how change the icon

Code: Select all

<template>
  <Button type="button" label="Toggle" @click="toggle"/>
  <Menu ref="menu" :model="items" :popup="true" />
<!--    <InputSwitch v-model="checked"/>-->
</template>

<script>
import { ref } from 'vue'

const darkModeIcon = ref('pi pi-refresh')

export default {
  name: "User_Menu",
  data() {
    return {
      checked: false,
      items: [
        {
          label: 'Dark mode',
          icon: darkModeIcon.value,
          command: () => {
            this.changeIcon()
          }
        },
        {
          label: 'Quit',
          icon: 'pi pi-fw pi-power-off'
        }
      ]
    }
  },
  methods: {
    toggle(event) {
      this.$refs.menu.toggle(event);

      console.log('toggle')
      console.log("darkModeIcon.value: " + darkModeIcon.value)
    },
    changeIcon() {
      console.log('changeIcon');
      console.log("darkModeIcon.value: " + darkModeIcon.value)
      darkModeIcon.value = 'pi pi-fw pi-power-off'
      console.log("darkModeIcon.value: " + darkModeIcon.value)
    }
  },
}

</script>

<style scoped>

</style>