向Teleport包裹的组件传递动态Prop时出现undefined问题求助

核心问题原因 #

直接解构defineProps返回的对象会丢失响应式特性——defineProps返回的是响应式对象，但解构出的guessedRank是普通变量，无法随父组件prop的更新同步变化，导致模态框触发时读取的仍是初始值。

解决方案1：直接使用响应式props对象 #

修改ResultsModal.vue的JavaScript部分，保留props的响应式引用：

const props = defineProps({
  show: Boolean,
  guessedRank: String
})

const { mutateAsync } = useMutation({
  mutationFn: guessClip,
})

const onModalEnter = async () => {
  console.log("Guessed rank: " + props.guessedRank);
  await mutateAsync({
    clipId: "a7feae04-b175-4596-8173-862675c29de7",
    subRank: props.guessedRank
  });
};

解决方案2：用toRefs转换为响应式Ref #

如果需要解构props，可通过toRefs将其属性转为响应式Ref：

import { toRefs } from 'vue';

const props = defineProps({
  show: Boolean,
  guessedRank: String
});
const { show, guessedRank } = toRefs(props);

const { mutateAsync } = useMutation({
  mutationFn: guessClip,
})

const onModalEnter = async () => {
  console.log("Guessed rank: " + guessedRank.value);
  await mutateAsync({
    clipId: "a7feae04-b175-4596-8173-862675c29de7",
    subRank: guessedRank.value
  });
};

额外优化：修正父组件监听逻辑 #

父组件中监听整个reactive对象时，应针对value属性做判断，避免无效触发模态框：

watch(() => guessedRank.value, (newVal) => {
  if (newVal) { // 仅当subRank非空时打开模态框
    toggleModal();
  }
});

内容的提问来源于stack exchange，提问作者Jorge Antezana