Hanging in a vue component with async / await call

Question

I make my first steps with the vue framework and I can't figure out to solve the following problem.

dateClick(arg)
        {
            this.cal.date = arg.date;
            this.cal.title = arg.resource.title;
            this.cal.resource = arg.resource.id;

            // const slots = (async() => {
            //     return await dataService.getSlots(arg);
            // })().catch(console.error);
            // console.log(slots);

            (async() => {
                const slots = await dataService.getSlots(arg);
                console.log(slots);
            })().catch(console.error);
        }

The console.log in the async function works correct and returns the slots. Finally I would need to also set a data attribute in the current Vue Component like this.cal.slots = slots. But that doesn't work, always undefined. I also tried the commented code above to return the await - this would result in "Promise {pending}". Can't figure it out how to solve this?

Answer 1

Try like this:

async dateClick(arg) {
  ...
  this.cal.slots = await dataService.getSlots(arg);
  ...