[Vue.js] Problema Proxy in reperimento dati

[fermat]

ciao!

sono paio d'ore che ci sbatto la testa ma non riesco a capire.
anche perchè questo problema ce l'ho solo qua.

in pratica:

<script>
import AllenamentiService from '@/service/AllenamentiService';

export default {
  data() {
    return {
      allService: null,
      totQta: null,
      events: null
    }
  },
  created() {
    this.allService = new AllenamentiService();
  },
  mounted() {
    this.getAll();
  },
  methods: {
    getAll() {
      this.allService.getAll().then(data => {
        console.log(data); // SI VEDONO TUTTI I DATI
        this.events = data;
        this.totQta = data.length; // VALORIZZATO CORRETTAMENTE
        console.log(this.events); // ERRORE
      });
    }
  }
}
</script>

li dove ho messo errore mi dice questo:

Proxy { <target>: (1455) […], <handler>: {…} }
<target>: Array(1455) [ {…}, {…}, {…}, … ]
<handler>: Object { get: get(target, key, receiver), set: set(target, key, value, receiver), deleteProperty: deleteProperty(target, key), … }
deleteProperty: function deleteProperty(target, key)
get: function get(target, key, receiver)
has: function has(target, key)
ownKeys: function ownKeys(target)
set: function set(target, key, value, receiver)
<prototype>: Object { … }

dato che solo qui mi da questo problema non riesco proprio a capire.
anche perchè quel allService.getAll() già lo uso in un altro componente!

[ciro78]

Ma io non vedo nessun errore in quello che hai scritto.

[fermat]

ok forse il problema non è quello allora.

in sostanza gli eventi non si vedono sul FullCalendar.
ho visto che events deve stare tra le options.

nel codice qui sotto, se metto quelli commentati funziona tutto.
se metto l'oggetto events da riempire da dati in remoto, non si vedono.
ma la struttura è la stessa, in quanto quelli commentati sono presi direttamente dal json remoto:

<template>
  <div class="grid">

    <div class="col-12">
      <div class="card mb-0 mt-5">
        <FullCalendar :events="events" :options="options"/>
      </div>
    </div>

  </div>
</template>

<script>
import AllenamentiService from '@/service/AllenamentiService';

import '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';

export default {
  data() {
    return {
      allService: null,
      options: {
        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
        initialDate: new Date(),
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        editable: true,
        selectable: true,
        selectMirror: true,
        dayMaxEvents: true,
        events: null,
        // events: [
        //   {
        //     "id": "2070",
        //     "a_id": "45",
        //     "title": "Arrampicata",
        //     "note": "<p>rockit</p>",
        //     "finito": "1",
        //     "data": "2022-03-10",
        //     "start": "2022-03-10"
        //   },
        //   {
        //     "id": "2069",
        //     "a_id": "60",
        //     "title": "Circuito cardio",
        //     "note": "<p>casa - 31:23</p>",
        //     "finito": "1",
        //     "data": "2022-03-09",
        //     "start": "2022-03-09"
        //   },
        //   {
        //     "id": "2068",
        //     "a_id": "45",
        //     "title": "Arrampicata",
        //     "note": "<p>rockit</p>",
        //     "finito": "1",
        //     "data": "2022-03-08",
        //     "start": "2022-03-08"
        //   }
        // ]
      },
    }
  },
  created() {
    this.allService = new AllenamentiService();
  },
  mounted() {
    this.getAllenamenti();
  },
  methods: {
    getAllenamenti() {
      this.allService.getAll().then(data => {
        // console.log(data);
        this.events = data;
        this.totQta = data.length;
      });
    }
  }
}
</script>

[fermat]

ok risolto:

 getAllenamenti() {
      this.allService.getAll().then(data => {
        this.options.events = data; // ECCO LA MODIFICA DA FARE
        this.totQta = data.length;
      });
    },