Reactivity 101: Property does not exist on type errors

Ionic Framework Ionic Vue
1

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
2

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