vue.jsvuejs3proxy-object

Update a Proxy Array in vue

I am trying to display a list of events limited to just the next month. I want to be able to click see more to show two months of events, then three, etc.

I have the below already working.

export function useSearchEventsForHomePage(months: number = 1) {
  const config = useRuntimeConfig().public;
  const url = config.eventApiUrl
    + '/events/search?startDate=' + encodeURIComponent(DateTime.local().plus({ minutes: 1 }).toUTC().toISO())
    + '&endDate=' + encodeURIComponent(DateTime.local().plus({ months: months }).toUTC().toISO())
    + '&summariseDates=false';

  const options = {
    method: 'GET',
    lazy: true,
    key: url,
    default: () => [],
  };

  return useFetch<Event[]>(url, options);
}

I am then calling this with the below which returns a Proxy Array like this

const searchPeriod = ref(1);
const { data: events } = await useSearchEventsForHomePage(searchPeriod.value);

enter image description here

I need to be able to click a See More button to get events for the next month. First thing I tried was to push the second month of events to the events array like this but that just added moreEvents in one entry as in the image.

async function seeMore() {
  searchPeriod.value++;
const { data: moreEvents } = await useSearchEventsForHomePage(searchPeriod.value);
events.value.push(moreEvents.value)
}

enter image description here

I don't really understand how proxy arrays work and nothing I've found online makes much sense to me so I'm a bit stuck here.

I need to either add the events from month 2 onto the end of the first array so that they are rendered using v-for.

Solution

  • You want to

    events.value.push(...moreEvents.value)

    if you get values [74..138]

    or

    events.value = moreEvents.value

    if you get values [0..138]