Topic: load an mdbtable from an API
I expect to be able to load data to the data.rows object in "Created" our "Mounted" from an API call so that I can display data in my mdbtable
In actuality, this seems to be quite impossible. All attempts (I have struggled with this for the past 8 hours)
I have seen other users with the same question on this website. They have received the answer (which is also available in the documentation) that they should add the URL to the API in the :data variable like this:
<mdb-datatable
:data="https://YOUR_API_URL"
striped
bordered />
This will make both Vue and Webstorm crash and protest since the ":" (colon) is an invalid operator. I see no other way of loading data from my database in to this table. What is the solution??
Yes, if the communication in the support threads and the in the documentation changes to reflect the fact the attribute value should be in both double quotes and in single quotes: "'https://YOUR_API_URL'", then I will be happy.
Magdalena Dembna staff commented 5 years ago
Thank you again for letting us know. Kind regards, Magdalena
Hi, Thank you for letting us know about this mistake, we'll fix it as soon as possible. Does it solve your problem? Kind regards, Magdalena
Hi, Unfortunately, right now for the code above to work correctly, the JSON data needs to structured in a following way: https://my-json-server.typicode.com/Rotarepmi/exjson/db . For now, the only solution I can propose would be to load you data in the lifecycle hook method and then pass them to data() in the required format. We are currently working on the better solution and we're sorry for the inconvenience. Best regards, Magdalena
Webbkameror.se free commented 5 years ago
Hi Magdalena,
I understand that you require a special format for it to work and I agree that it is a bad way to overcome this problem, but do you have comment on that it is invalid code to enter URLs in the attribute value for ‘data’? This means your current code example wouldnt work with the proper format either.
For your second suggestion, I have tried every single life cycle method to add the data, butnothing seems to affect the actual MDB-component’s data. I can see the data in the console though.
Webbkameror.se free commented 5 years ago
I just noticed the error in the documentation. And I can't believe I didn't spot it earlier. The attribute value should be in both double quotes and in single quotes: like this: "'https://YOUR_API_URL'". This will make the API-URL version work
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: 5.1.1
- Device: Any
- Browser: Any
- OS: Any
- Provided sample code: No
- Provided link: No