更新 Nuxt 3 中的 v-for 组件

Question

我有一个组件 (

NoteCard

)，它根据数组

v-for

中的值作为 ID 使用

notes

进行渲染。它在加载时按预期呈现，但是当我更改天数（具有共享状态的输入字段）并单击重新加载按钮时 - 这又调用

reloadNotes

函数 - 它不会更新，直到我更改

 的值再次days

（我想它会调用下一个刻度或重新渲染的某个事件）

当我寻找强制在线更新的方法时，我只能找到 Vue 早期版本的答案或由于某种原因在 Nuxt 3 中不起作用的答案。

<template>
    <div>
        <button 
            class="btn"
            v-on:click="refresh"
            >
        Reload {{ days || 5 }} days</button>
        <NoteCard v-for="note in notes" :noteID=note :key="note"/>
    </div>
</template>

<script setup>
    const days = useState("days")
    let notes = new Array()
    await reloadNotes()
    
    async function reloadNotes(event) {
        console.log(`reloading ${days.value} days`)
        let response = await useFetch(`/api/notes?days=${days.value}`)
        notes = response.data
    }
</script>

如何让组件在获取响应后立即根据响应中的值进行渲染？

Answer 1

回答我自己的问题：

发布这个问题后，我立即发现了一些有用的东西。我在重新加载函数的末尾添加了对

refreshNuxtData

的调用。像这样：

async function reloadNotes(event) {
    console.log(`reloading ${days.value} days`)
    let response = await useFetch(`/api/notes?days=${days.value}`)
    notes = response.data
    refreshNuxtData()
}