Tengo una matriz de publicaciones dentro de reactivo () y quiero que se actualice en Montado.
¿Cómo puedo hacer esto?
MODELO:
<q-card> <board-item-list :items="items" v-if="items.length" /> <board-empty v-else /> </q-card>GUION
import { reactive, onMounted } from "vue"; import { posts } from "./fake-data.js"; export default { setup() { let items = reactive([]); ... onMounted(() => { // to fill the items with posts. items.values = posts; // I tried this not working items = posts; //I tried this not working console.log(items); }); ... return { ... items, }; }, };Intente usar ref en lugar de reactive o defina items como campo anidado en un estado reactivo como:
import { reactive, onMounted } from "vue"; import { posts } from "./fake-data.js"; export default { setup() { let state= reactive({items:[]}); ... onMounted(() => { state.items = posts; console.log(state.items); }); ... return { ... state, }; }, };en plantilla:
<q-card> <board-item-list :items="state.items" v-if="state.items.length" /> <board-empty v-else /> </q-card> si desea deshacerse del state en la plantilla, puede usar toRefs :
import { reactive, onMounted,toRefs } from "vue"; import { posts } from "./fake-data.js"; export default { setup() { let state= reactive({items:[]}); ... onMounted(() => { state.items = posts; console.log(state.items); }); ... return { ...toRefs(state),//you should keep the 3 dots }; }, };