• • 目标**

根据动态变化的引用（ref）呈现组件。用户可以执行"搜索"功能，返回数据并更新引用。更新的引用应依次更新使用v-for呈现的组件。

• • 我的设置**

我有一个onMounted（）生命周期钩子，它发出axios请求并将所有数据返回到引用中。

onMounted(async () => {
    const response = await axios.get('/api/subject/')
    allSubjects.value = await response.data.data;
})

参考：

const allSubjects = ref(null)

模板：

<OneSubject
    v-for="subject in allSubjects" 
    :key="subject.id"
    :subject="subject" 
/>

到目前为止一切都很好...

• • 问题**

当我为"search"特性发出另一个请求时，axios请求工作正常，我能够得到一个带有数据（一个新的对象数组）的响应。
当尝试使用此数据更新我的引用时出现问题，如下所示：

async function search(searchInput) {
    const response = await axios.get(`/api/subject/search/${searchInput}`)
    console.log(response) // <-- RESPONSE HAS DATA
    allSubjects.value = await response.data.data; // <-- CAUSES ERROR
}

抛出的错误来自v-for中呈现的组件：

我可以验证引用是否已成功更新为新数据，但在v-for？中呈现组件时似乎出现了问题。

• • 更新**

下面是它试图在v-for中呈现的组件。

<template>
    <div class="subject-wrapper" v-bind:style="{ background: `rgba(0, 0, 0, .3) url('${imgSrc}') center / cover` }">
        <div class="darken-bg"></div>
        <div class="subject-name">{{ subject.name }}</div>
    </div>
</template>

<script setup>

    import { onMounted, computed } from 'vue'

    const props = defineProps({ subject: Object }) 
    const imgSrc = computed(() => require(`@/assets/images/subject/${props.subject.image}`))

</script>

我更新了组件，如下所示：

<template>
    <div class="subject-wrapper" v-bind:style="{ background: `rgba(0, 0, 0, .3) url('${imgSrc}') center / cover` }">
        <div class="darken-bg"></div>
        <div class="subject-name">{{ subject.name }}</div>
    </div>
</template>

<script setup>
    import { reactive, computed, onUpdated } from 'vue'
    
    const props = defineProps({ subject: Object })
    const subject = reactive(props.subject)
    const imgSrc = computed(() => require(`@/assets/images/subject/${subject.image}`))

    onUpdated(() => {
        console.log('component subject prop:', props.subject)
        console.log('subject reactive:', subject)
    })

</script>

之后，搜索执行时没有错误，但呈现了错误的组件。我在控制台记录了这些值：

正如你所看到的，它从prop传递了正确的数据，但是它呈现了错误的数据？我是否误解了reactive应该如何工作？我不知道subject reactive的错误数据是从哪里来的。