Vue3 v-model绑定数据不更新组件，Firestore修改后视图无刷新求助

核心原因是Vue3中没有将渲染用的数组声明为响应式数据，同时存在多个语法和逻辑使用错误，具体问题如下：

• 缺少响应式声明：setup函数内直接用let定义的categorie属于普通JS数组，Vue无法监听其内容变更，修改后不会触发组件重渲染。
• v-for的key值非法：将整个categoria对象作为key值，Vue虚拟DOM比对时无法正确识别数组更新，也会阻断列表重渲染逻辑。
• 异步操作逻辑缺陷：creaCategoria是Firestore异步写入方法，未等待写入完成就修改前端数组，容易出现前后端数据不一致。
• v-model绑定错误：v-for循环内的组件直接绑定整个数组作为v-model值，不符合单个组件绑定单个数据项的设计规范。

修正后代码 #

模板部分修正 #

<template>
  <div class="header">
    <span class="mdi mdi-home icona" />
    <h1>Modifica menù</h1>
  </div>
  <Categoria
    v-model="categoria"
    v-for="categoria in categorie"
    :key="categoria.nome" <!-- 若数据有唯一id请替换为categoria.id -->
    :Nome="categoria.nome"
  />
  <div class="contenitore_aggiungi">
    <span @click="crea()" class="mdi mdi-plus aggiungi" />
  </div>
</template>

脚本部分修正 #

<script>
import Categoria from "@/components/edit/Categoria-edit.vue";
import { useRoute } from "vue-router";
import { creaCategoria, ottieniCategorie } from "@/firebase";
// 导入Vue3响应式API与生命周期钩子
import { ref, onMounted } from "vue";

export default {
  name: "Modifica",
  components: { Categoria },
  setup() {
    const route = useRoute();
    const idRistorante = route.params.id;
    // 用ref声明响应式数组
    const categorie = ref([]);

    // 数据请求放到onMounted中执行，避免async setup需要配合Suspense组件的限制
    onMounted(async () => {
      categorie.value = await ottieniCategorie(idRistorante);
      console.log(categorie.value);
    });

    // 新增分类方法放在setup内统一管理
    const crea = async () => {
      const nuovaCategoria = "Nuova categoria";
      // 等待数据库写入完成后再更新前端数据
      await creaCategoria(idRistorante, nuovaCategoria);
      categorie.value.push({ nome: nuovaCategoria });
      console.log(categorie.value);
    };

    return { idRistorante, categorie, crea };
  }
};
</script>

内容的提问来源于stack exchange，提问作者Lorenzo Andreasi