fix: change update to computed

[davidnixon]

Closes #

The side nav with icon does not work properly if the side nav is hidden with v-if and then later shown
https://ihzer.csb.app/

Force an update to show icons

Changelog

M packages/core/src/components/cv-ui-shell/cv-side-nav-link.vue

[netlify]

Deploy preview for carbon-components-vue ready!

Built with commit f2a0238

https://deploy-preview-1091--carbon-components-vue.netlify.app

[lee-chase]

Slots are not reactive so I am not sure this will work. Generally, I tend to use the following pattern. Does this work for you?

data(): {
  return {hasSlotX: false};
},
mounted() {
  this.checkSlots();
},
updated() {
  this.checkSlots();
},
methods: {
  checkSlots() {
    this.hasSlotX = !!this.$slots['slot-x'];
  },
}

[davidnixon]

Yeah the slots not being reactive is the core issue.

Both the computed version and your version with the updated and mounted both work.

Testing with my use case, I added some logging and I can see that adding the check to the mounted function fixes the issue. The update function is not called.

I can also see that if I use the computed version, the hasNavIcon() function is called during the mount process and update process.

LMK if you want me to change this to use the updated/mounted pattern above. I didn't look at the other file cv-side-nav* files but now that I am looking I see they are all using that updated/mounted pattern so probably better that they are all the same.

[lee-chase]

Closing in favour of #1902