Using Watchers on props in vue3 Script Setup

Question

I'm passing a prop to a component declaring in which state it is. I want to watch the prop and set the css accordingly. But it does not work, can someone telling me what I'm doing wrong?

<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>

Nikola Pavicevic · Accepted Answer · 2022-06-17 14:35:43Z

12

try like following:

watch(
  () => props.state,
  (newValue, oldValue) => {
    if (newValue === 'finished') cardStatus.value = 'border border-success'
  }
);

answered Jun 17, 2022 at 14:35

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Lx45 Over a year ago

It does not work like that, but I just found a way myself

Estus Flask Over a year ago

@Lx45 It should work exactly the same way as in your post.

Bravo Over a year ago

I agree - this is how to use watch on a prop, not sure why OP can't make it work, probably doing something wrong - probably because in the question he changes cardStatus.value and in his answer cardStatusCard.value

Lx45 Over a year ago

I agree with you, this answer is right. In my case I needed to use watchEffect because the watcher had to bet triggered initially.

Bumptious Q Bangwhistle Over a year ago

I needed to add { immediate: true } in order to get this to work.

Lx45 · Accepted Answer · 2022-06-17 14:50:57Z

0

I found a way to make it work.

<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>

answered Jun 17, 2022 at 14:50

Lx45

1651 gold badge4 silver badges13 bronze badges

Comments

outzo · Accepted Answer · 2024-02-16 14:48:22Z

0

I found this way

const retWatch: any = toRef(props, 'props.state');

watch([retWatch], (newValue) => {
    console.log(newValue);
    
});

edited Feb 16, 2024 at 14:48

answered Feb 16, 2024 at 14:47

outzo

15 bronze badges

Collectives™ on Stack Overflow

Using Watchers on props in vue3 Script Setup

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related