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

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.

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à 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
<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>