vue.js - Ionic + Vuew: strange error when compiling

Question

I'm experimenting with vuejs+ionic but when I try to compile on the mac I get this error

TS2339: Property 'selectedDate' does not exist on type '{ handler(date: string): Promise<false | undefined>; deep: boolean; }'.

If I compile in window everything is working. This is located in the "watch" section.

question from:https://stackoverflow.com/questions/65911017/ionic-vuew-strange-error-when-compiling

Answer 1

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Controlli Preoperativi</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Controlli preoperativi</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-grid>
        <ion-row>
          <ion-col>
            <div class="ion-text-center">
              Da qui potrai impostare la presenza o assenza di non conformit&agrave; nel tuo locale.
              <br />
              Attenzione, le modifiche nel passato sono possibili solo fino al giorno precedente.
            </div>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col>
            <ion-item>
              <ion-label>imposta la data di lavoro</ion-label>
              <ion-datetime display-format="DD/MM/YYYY" v-model="selectedDate"></ion-datetime>
            </ion-item>
          </ion-col>
        </ion-row>
        <ion-row>
            <ion-col v-for="item in controlli" :key="item.id">
              <ion-card>
                <img :src="item.immagine" :alt="item.nome" :title="item.nome" />
                <ion-card-header>
                  <ion-card-title>{{ item.nome }}</ion-card-title>
                </ion-card-header>
                <ion-card-content>
                  <div>
                    {{ item.descrizione }}
                  </div>
                  <div>
                    <ion-item>
                      <ion-label>presente</ion-label>
                      <ion-checkbox v-model="item.nonConformitaPresente" :data-id="item.id" data-type="ncp" @click="handleCheckChange(item.id, 'ncp')" />
                    </ion-item>
                  </div>
                  <div>
                    <ion-item>
                      <ion-label>non presente</ion-label>
                      <ion-checkbox v-model="item.nonConformitaNonPresente" :data-id="item.id" data-type="ncnp" @click="handleCheckChange(item.id, 'ncnp')" />
                    </ion-item>
                  </div>
                  <div v-show="item.nonConformitaPresente">
                    <ion-item>
                      <ion-label position="floating">problema riscontrato</ion-label>
                      <ion-textarea rows="5" v-model="item.problemaRiscontrato"></ion-textarea>
                    </ion-item>
                    <ion-item>
                      <ion-label position="floating">risoluzione</ion-label>
                      <ion-textarea rows="5" v-model="item.risoluzione"></ion-textarea>
                    </ion-item>
                  </div>
                  <div class="ion-text-center" style="margin-top: 15px">
                    <ion-button type="submit" shape="round" @click="handleSaveButton(item.id)" :data-id="item.id">
                        Salva&nbsp;
                        <ion-icon :icon="save"></ion-icon>
                    </ion-button>
                  </div>
                </ion-card-content>
              </ion-card>
            </ion-col>
        </ion-row>
      </ion-grid>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { IonHeader, IonPage, IonDatetime, IonItem, IonIcon, IonButton, alertController, IonTextarea, IonContent, IonCheckbox, IonLabel, IonToolbar, IonTitle, IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonGrid, IonRow, IonCol } from '@ionic/vue';
import { save } from 'ionicons/icons';
import ApiService from '@/services/api.service';
import {ControlloModel} from '@/services/app.service';

export default  {
  name: 'controlli',
  components: { IonHeader, IonPage, IonDatetime, IonItem, IonIcon,  IonButton, IonLabel, IonTextarea, IonContent, IonCheckbox, IonToolbar, IonTitle, IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonGrid, IonRow, IonCol },
  setup() {
    return {
      save
    }
  },
  data() {
    return {
      selectedDate: new Date().toISOString().split('T')[0],
      controlli: new Array<ControlloModel>()
    }
  },
  watch: {
    selectedDate: {
      async handler(date){
        const diff = Math.floor(new Date().getTime() - new Date(date).getTime());
        const day = 1000 * 60 * 60 * 24;
        const days = Math.floor(diff/day);
        if(days <0 || days >1){
          const alert = await alertController
            .create({
              cssClass: 'my-custom-class',
              header: 'Errore',
              subHeader: 'Data non valida',
              message: 'La data selezionata non è valida, verrà utlizzato "OGGI" per la visualizzazione dei dati!',
              buttons: ['OK'],
            });
            alert.present();
            await alert.onWillDismiss();
            date = new Date().toISOString().split('T')[0];
            this.selectedDate = date;
            return false;
        }
        await ApiService.get("/api/CheckGiornalieri?data=" + date.substring(0, 10))
          .then(response => this.controlli = response.data);
      } , deep: true
    }
  },
  created() {
    const data = new Date().toISOString().split('T')[0];
    ApiService.get("/api/CheckGiornalieri?data=" + data).then(response => this.controlli = response.data);
  },
  methods: {
    handleCheckChange(srcId: string, srcElemType: string){
      const currItem = this.controlli.filter(function(elem){ if(elem.id == srcId) return elem; })[0];
      if(srcElemType === "ncp"){
        currItem.nonConformitaNonPresente = false;
      } else {
        currItem.nonConformitaPresente = false;
      }
    },
    async handleSaveButton(srcId: string) {
      const currItem = this.controlli.filter(function(elem){ if(elem.id == srcId) return elem; })[0];
      const response = await ApiService.post("/api/NonConformita", 
        {
          Data : new Date(this.selectedDate),
          IdControllo : srcId,
          Presente : currItem.nonConformitaPresente,
          NonPresente : currItem.nonConformitaNonPresente,
          Problema : currItem.problemaRiscontrato,
          Risoluzione : currItem.risoluzione
        }
      );
      if(response.data.state === false){
        const alert = await alertController
          .create({
            cssClass: 'my-custom-class',
            header: 'Errore',
            subHeader: '',
            message: response.data.message,
            buttons: ['OK'],
          });
          alert.present();
      }
    }
  }
}
</script>