Single File Component and Data from Ajax JSON

I want to use Single File Component and have the data be returned from ajax request to populate the template as the ajax does not return the data to parse to the template

`data: function () {
app.request.json('users.json', function (data) {
  return {
        title: 'Component Page',
        names: data
      }
})
}`
 data: function () {
    app.request.json('users.json', function (data) {
    
          console.log(data);
          // veja o que ele está retornando.

       })
    }

I understand what its return, its json however I can’t get the data from the ajax request to show in the template only if return static data. anything inside the ajax request is not returned

Components renders on load and only once, so returnig/updating data after initial render won’t have effect, you need to update it manually or load data before loading the page, it can be done with async route:

{
  path: '/some-page/',
  async(to, from, resolve, reject) {
    app.request('users.json', (data) => {
      resolve(
        {
          componentUrl: 'somecomponent.html',
        },
        {
          context: {
            title: 'Component Page',
            names: data,
          }
        }
      );
    });
  }
}
1 Like

Thank you that worked