观看 Vue 3 prop 来触发 dom 更新

Question

我正在使用 Nuxt 构建我的第一个项目，但遇到了一个问题。我有一个组件（我们称之为变体选择器）来选择产品变体，该变体将事件传递到父组件（产品视图），并将“selectedVariant”变量设置为所选变体 id，然后将此变量传递到另一个子组件（变体显示）。在我的变体显示组件中，我有两个 props，整个产品对象和 selectedVariant。我想观看所选的变体并根据变体选择器组件中的选择更新图像 src。

代码如下：

产品视图.vue

<script setup>
const props = defineProps(['product'])
const selectedVariant = ref(props.product.variants.edges[0].node.id)
function updateVariant(variantId){
    selectedVariant.value = variantId 
    console.log(variantId)
}
</script>
<template>
    <div class="wrapper">
        <variant-display 
            :product="product" 
            :selectedVariant="selectedVariant"/>
        <variant-selector 
            @select-variant="updateVariant" 
            :list="product.variants.edges"/>
    </div>
</template>

变体选择器.vue

<script setup>
const props = defineProps(['list'])
const emit = defineEmits(['select-variant'])
</script>
<template>
    <div class="variant-selector">
        <v-btn 
            v-for="(variant, i) in list" 
            :key="i"
            @click.stop="$emit('select-variant', variant.node.id)" 
        >{{ variant.node.selectedOptions[0].value }}</v-btn>
    </div>
</template>

变体显示.vue

<script setup>
const props = defineProps(['selectedVariant', 'product'])
const heroImage = ref(props.product.variants.edges[0].node.image.url)
watch(props.selectedVariant, (newVariantId) => {
    props.product.variants.edges.forEach((variant)=>{
        if(variant.node.id === newVariantId){
            heroImage.value = variant.node.image.url
        }
    })
})
</script>
<template>
    <h1>{{ product.title }}</h1>
    <img :src="heroImage" />
    <div>variant: {{ selectedVariant }}</div>
</template>

当我对此进行测试时，我希望当我单击变体选择器组件中的任一按钮时，标签会更新为正确的图像。当我单击选择器组件时，我也有

<div>variant: {{ selectedVariant }}</div>

来观察 selectedVariant 属性的值发生变化，并且它正在像预期的那样更改值，但在开发控制台中，我收到一个 Vue 警告props.selectedVariant 不是有效的监视源。它说它必须是一个引用，但 props.selectedVariant 是一个引用，我可以看到该标签更新的操作。

那么...为什么 watch() 不会在 prop 更新时触发？

Answer 1

嗯，我终于找到了正确的文档来回答我的问题。我以为我已经彻底读完了所有内容，但错过了这一点。

我必须在variant-display.vue 的设置中添加

let { selectedVariant } = toRefs(props)