Property doesn't exist - Axios & TS

Question

I'm trying to fetch data from a google spreadsheet with axios in Vue3 & TypeScript.

That's my first time using vue3 instead of Vue2.

I have this error : Property 'items' does not exist on type 'BiblioAll'

And here is my code

<template>
  /// My template
</template>

<script lang="ts">
import { Vue } from "vue-class-component";

export default class BiblioAll extends Vue {
    data () {
        return{
            items: {} as any
        }
    }
    created(){
            this.axios.get("https://spreadsheets.google.com/feeds/list/1ZTO87yKX4NkQ7I641eL01IcGzlnugdK_Nkou5cSy1kQ/1/public/values?alt=json")
            .then(response => (this.items = response))
        }
        
    }
}
    
</script>

<style scoped>
     /// Styles
</style>

Do someone have any idea how to solve it ?

Thank you

Answer 1

Vue 3 supports Typescript very well so I recommend to not use vue class component, just create your component using defineComponent to get types inference as follows :

<template>
  /// My template
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent( {
    data () {
        return{
            items: {} as any
        }
    }, 
    created(){
            this.axios.get("https://spreadsheets.google.com/feeds/list/1ZTO87yKX4NkQ7I641eL01IcGzlnugdK_Nkou5cSy1kQ/1/public/values?alt=json")
            .then(response => (this.items = response))
        }
        
    }
})
    
</script>

<style scoped>
     /// Styles
</style>

Answer 2

define items in your BiblioAll class