Reading json vue

Ionic Framework
1

I must be missing something really basic, but cannot go pass this one for almost a day :confused:

when I add this one, iam getting “Property ‘usersRemote’ does not exist on type’{ data(): { usersRemote: null; }; created(): void; }'.”

<script lang="ts">
export default {
  data() {
    return {
      usersRemote: null
    };
  },

  created() {
    fetch("https://app.bromster.docker-lite.uvminteractive.com/")
        .then(response => response.json())
        .then(data => (this.usersRemote = data));
  }
};


</script>

I am using the template app from ionic/vue (menu) that loads vue script.

In this script I am trying to work with simple json data stored on remote server

I get the example from here Vue + Fetch - HTTP GET Request Examples - CodeSandbox

I am missing something from the code hierarchy but not sure what

Thanks for any advice

2

some more info and/or clarification
the demo app (App.vue) uses a router which then loads my script. It seems if I run my script in App.vue, it works as expected.

but when I use this code in a loaded script, then it fails).

3

Since you are using TypeScript with the Vue Options API, you need to wrap your code in a defineComponent - TypeScript with Options API | Vue.js so your data property userRemote can be understood by TypeScript.

4

thanks, that did the trick !

I found out, that other way was to leave out the lang params entirely - i am not sure whether this way does have any drawbacks tho …

1 Like
5

Leaving out the lang tag basically turns off TypeScript for the component. I would stick with TypeScript. You’ll thank yourself later :grinning:

I went back and forth a couple of times, TypeScript or not, as it was a bit of a learning curve while also learning Ionic and Vue 3 (had previously used Vue 2). BUT, I am so glad I stuck with it now. I virtually have zero errors at runtime because everything is checked beforehand.

1 Like