Tengo este código aquí, básicamente se obtiene de firestore en setup() , luego muestra la información con el componente Categoria. También debería actualizar los componentes de Categoria cuando se presiona <span> . Sin embargo, algo no funciona. Mi fragmento actualizó correctamente la base de datos pero no vuelve a cargar el componente... ¿alguna idea?
<template> <div class="header"> <span class="mdi mdi-home icona" /> <h1>Modifica menù</h1> </div> <Categoria v-model="categorie" v-for="categoria in categorie" v-bind:key="categoria" :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"; export default { name: "Modifica", components: { Categoria }, async setup() { const route = useRoute(); let idRistorante = route.params.id; let categorie = await ottieniCategorie(idRistorante); console.log(categorie); return { idRistorante, categorie }; }, methods: { crea() { let nuovaCategoria = "Nuova categoria"; creaCategoria(this.idRistorante, nuovaCategoria); this.categorie.push({ nome: nuovaCategoria }); console.log(this.categorie); }, }, }; </script>¡Gracias por tus respuestas!
Debe declarar la categorie como una propiedad reactiva . También puede escribir métodos en setup() en lugar de methods :
import { ref } from 'vue' export default { setup() { const route = useRoute(); let idRistorante = route.params.id; const categorie = ref({}) // <-- add default value of properties const getData = async () => { const data = await ottieniCategorie(idRistorante); categorie.value = data } getData() // or void getData() const crea = () => { let nuovaCategoria = "Nuova categoria"; categorie.value.push({ nome: nuovaCategoria }); console.log(categorie.value); }, return { idRistorante, categorie, crea }; } } Asegúrese de que el valor predeterminado de categorie esté establecido en ref() . Si es una matriz, configúrelo en ref([]) .