Props reactivness lost

[andreadisaro]

trafficstars

Hi, if you define a component like this:

<script setup>
import { ref } from 'vue'
const valid = ref(false)
</script>

<template>
  <div
    class="rounded justify-content-center d-flex"
    :class="{
      'bg-success': valid,
      'bg-danger': !valid,
    }"
    style="width: 25px; height: 25px"
  >
    <CIcon
      :icon="valid ? 'cil-check' : 'cil-x'"
      @click="valid = !valid"
      class="text-white my-auto"
    />
  </div>
</template>

You'll see that the icon won't change when you click on the icon itself, while the color (class bg-success or bg-danger) will change. I'm afraid this behaviour is something that is showing in all of the components, but I don't have an evidence of that

Thank you

edit: created an even simplier test case

[andreadisaro]

guys this is a serious problem that will prevent me (and I think everyone else...) from using the template, please tell me you're going to address it ASAP and I don't have to choose another template...

[mrholek]

@andreadisaro, it's not a problem with the template. The icon prop on the CIcon component is not reactive, but I will check if we can improve it.

[andreadisaro]

@andreadisaro, it's not a problem with the template. The icon prop on the CIcon component is not reactive, but I will check if we can improve it.

Lukasz, please let me know asap if this is feasible and doable on every prop of the components of the template quickly, otherwise I'll have to choose another template. I'm sorry but there's no scenario I can think of where a prop in a vue component shouldn't be reactive, it's just not the way vue is intended to work...

[mrholek]

@andreadisaro please update @coreui/icons-vue to 2.2.0

[andreadisaro]

@mrholek thank you, it's working now. although I'm concerned that if I keep working on the template I will find other situations like this in other components... are you planning to fix the other components props as well? thank you

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions