Display data in template

I need to display data in the template. I make a request and get the data,


methods: {
...
getData(){
      editData.data("/profile",  this.getId()).then(function(r: any){
          console.log(r.data);          
          r.data;
        });    
      }
...
}

I call the function by doing this:


  created(){
      this.data=  this.getData();
    },

And in the template

{{data}}

The problem is that it shows nothing because it’s a promise. I call the method getData(); in the created method because I need to call the function when the page is loaded.

So I would like help with this…either advice on how I could do that or a way to call my method getData in setup()

If I replace

getData(){
      editData.data("/profile",  this.getId()).then(function(r: any){
          console.log(r.data);          
          r.data;
        });    
      }

by


getData(){
    return "123";
 }

It outputs 123 in the template.

So I did all that because I couldn’t find a way to get the route parameters in the setup method, so I had to define in methods:{}, a function to get data passing the parameter from the route. I got the route parameter like this: this.$route.params.id but I got stuck when trying to pass the result to the template. So I found a way to get the route parameters in the setup method:

In imports, I just changed from

import {useRouter} from "vue-router";

to

import {useRoute} from "vue-router";

and then, I was able to get the params by just doing this:

const route=useRoute(); and console.log(route.params);