Estoy pasando un accesorio a un componente que declara en qué estado se encuentra. Quiero ver la utilería y configurar el css en consecuencia. Pero no funciona, ¿alguien puede decirme qué estoy haciendo mal?
<script setup> import { onMounted, reactive, ref, watch, watchEffect } from 'vue' const props = defineProps({ title: String, date: String, state: String, }) let cardStatus = ref('') watch(props.state, () => { if (props.state === 'finished'){ cardStatus.value = 'border border-success' } }) </script> <template> <div :class="'bg-main-light rounded-2xl w-full p-3 lg:px-5 ' + cardStatus"></div> </template>intente como sigue:
watch( () => props.state, (newValue, oldValue) => { if (newValue === 'finished') cardStatus.value = 'border border-success' } );Encontré una manera de hacer que funcione.
<script setup> import { onMounted, reactive, ref, watch, watchEffect } from 'vue' const props = defineProps({ title: String, date: String, state: String, }) let cardStatusClass = ref('') watchEffect(() => { if (props.state === 'finished'){ cardStatusClass.value = 'border border-success' } }) </script>