在 vue3 脚本设置中的 props 上使用 Watchers

Question

我将一个 prop 传递给一个组件，声明它所处的状态。我想观看 prop 并相应地设置 css。但这不起作用，有人可以告诉我我做错了什么吗？

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

Answer 1

尝试如下：

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