Reactivity 101: Property does not exist on type errors

Hey there, I’m trying to learn Ionic Vue by doing some simple experiments with binding properties. Can anyone tell me why I’m getting an error here (Property 'appName' does not exist on type '{ changeAppName(): void; }'). Here’s the code, it’s using TypeScript

<template>
  <ion-page>
    <ion-content :fullscreen="true">
      <p>{{ appName }}</p>
      <button @click="changeAppName">Change app name</button>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { IonPage, IonContent } from '@ionic/vue';

export default  {
  name: 'Example',
  components: { IonContent, IonPage },
  data() {
    return { appName: 'Initial app name' }
  },
  methods: {
    changeAppName(){
      this.appName = 'Changed app name'
    }
  }
}
</script>

Must be missing something real obvious!

1 Like

When creating a component, you should use defineComponent as that provides additional TypeScript information to the compiler:

import { defineComponent } from 'vue';

export default defineComponent({
  ...
});
1 Like