Componente - Groups.vue
<MainTable @next="getNextGroup" @prev="getPrevGroup" @start="getGroups" :columns="tableColumns" :data="groupsData" /> </div> </template> <script setup> import MainTable from "../../components/MainTable/index.vue"; import { useGroupsStore } from "../../store/groups"; import { onMounted, reactive, ref } from "vue"; const groupStore = useGroupsStore(); let groupsData = reactive([{}]); let tableColumns = ref([ { label: "Название", prop: "title", }, { label: "Время", prop: "time", }, { label: "Количество мест", prop: "count", }, ]); const getGroups = async () => { const res = await groupStore.getGroups(); console.log("groupsData", groupsData); }; const getNextGroup = async () => { const res = await groupStore.getGroupsNext(); console.log("groupsData", groupsData); }; const getPrevGroup = async () => { const res = await groupStore.getGroupsPrev(); console.log("groupsData", groupsData); }; </script>Y componente principal: MainTable.vue
<script setup> import { toRefs, onMounted, watch } from "vue"; const emit = defineEmits(["next", "prev", "start"]); const props = defineProps({ columns: Array, data: Array, }); let { data: tableData } = toRefs(props); onMounted(() => { emit("start"); }); const next = () => { emit("next"); }; const prev = () => { emit("prev"); }; </script>Obtengo los datos y los escribo en groupsData, pero los datos no se actualizan en MainTable.
Uso torres y todavía aparece una matriz vacía, o simplemente aparece un Proxy.
intenté usar reactivo y ref O necesitas usar computado
¿Por qué los accesorios pueden no cambiar de forma reactiva?
Creo que el problema es que ha inicializado groupData como un objeto reactivo, pero luego lo está reemplazando con un objeto no reactivo.
Hay un par de maneras de lograr lo que quieres.
const data = reactive({ groups: [] }); data.groups = await groups store.getGroups();ref en lugar de reactive const groupsData = ref([]); groupsData.value = await groupStore.getGroups(); Tenga en cuenta que una ref es un objeto Proxy . Puede hacer referencia a groupData directamente en la plantilla, pero para obtener o establecer su valor en el script, debe usar groupData.value como se indicó anteriormente.