Vue JS 3 Tutorial for Beginners #9 - Fetching Data
ฝัง
- เผยแพร่เมื่อ 4 ส.ค. 2024
- Hey gang, i this Vue 3 tutorial I'll show you how to fetch data in our components.
---- Timestamps ----
0:00 - Using JSON Server
7:09 - Fetching data from components
15:47 - Conditionally showing data
🐱💻 🐱💻 BUY THE FULL 20-hr COURSE ON UDEMY:
www.thenetninja.co.uk/udemy/v...
🐱💻 🐱💻 Course Files:
+ github.com/iamshaunjp/Vue-3-F...
🐱👤🐱👤 JOIN THE GANG -
/ @netninja
🐱💻 🐱💻 My Udemy Courses:
+ Modern JavaScript - www.thenetninja.co.uk/udemy/m...
+ Vue JS & Firebase - www.thenetninja.co.uk/udemy/v...
+ D3.js & Firebase - www.thenetninja.co.uk/udemy/d...
🐱💻 🐱💻 Helpful Links:
+ HTML & CSS Course - • HTML & CSS Crash Cours...
+ Get VS Code - code.visualstudio.com/
🐱💻 🐱💻 Social Links:
Facebook - / thenetninjauk
Twitter - / thenetninjauk
Instagram - / thenetninja
for anyone having difficulties running the json-server command: Here is the solution:
Run:
npx json-server --watch data/db.json
Happy coding :)
Thanks that worked, the line in the video gave me an error
Thank you!
The man's a life saver!
thank you
legend
Seriously, as everyone has already said, Thank you very much!! Please keep doing this!! You've helped a lot. I'm actually getting pretty good at front end development and feel confident getting into back end.
Awesome series thank you. With the latest json server "1.0.0-alpha.20", I had to modify db.json otherwise I kept getting a 404 not found. I had to add quotation marks around the ID numbers as follows {
"jobs": [
{
"id": "1",
"title": "Ninja UX Designer",
"details": "lorem"
},
{
"id": "2",
"title": "Ninja Web Developer",
"details": "lorem"
},
{
"id": "3",
"title": "Ninja Vue Developer",
"details": "lorem"
}
]
}
Thank you I was digging the Internet searching for a fix
Thanks bro, why does it happen? We don't know... hahaha
Had the same issue, thanks for solution!
thanks!
Thanks! Same here.
Love it! Maybe one thing overlooked, is even if you use a invalid job ID ( /jobs/6), JSON server returns 404 but sends an empty object, so when you do v-if="job" it's still true, even though this.job is just an empty object
I gotta tell you
You're a life saver
Everytime i get stuck at something i always come here and miraculously almost every problem get solved
Aha, glad I could help :) thanks for watching!
You are a brilliant teacher! Thank you very much!
Thank for tutorials, please bring more tutorials in vue 3 like crud api, crud more. There are very few tutorials in vue 3 and you tutorials are best among them. I hope you also use bootstap 4 or 5 for ui.
Many thanks for these great tutorials!
You're a great teacher. Keep up the good work Shaun!
Thanks Maurice, I appreciate that! :)
thank you, you are teaching in best way ❤️
For all those who are too lazy to navigate to the course files:
{
"jobs": [
{ "title": "Ninja UX Designer", "id": 1, "details": "lorem" },
{ "title": "Ninja Web Developer", "id": 2, "details": "lorem" },
{ "title": "Ninja Vue Developer", "id": 3, "details": "lorem" }
]
}
thank you for your awesome content shaun
Interesting and proper way to work with data.
Thanks :)
I love your voice you're good for explaining the code
Shout-out from France ❤️
Thank u so much Ninja ❤ u are the best!
I stopped continuing Vue and switched to React a few months ago. But, now I'm back, thanks to you. Love your tutorials :)
React vs Vue which one best ?
@@mohdmahtab8991 Both of them are great frameworks. But I would suggest going with Vue as it is a lot more beginner friendly.
I've been working with React for over a year. I am thinking to start learning Vue as well. How different is it?
@@RohitThakur-sj7en thankyou brother 🙂
@@TheCodingOdyssey I would insist you to give it a try. Everything is far more convenient in Vue.
Thank you very much for your course! it's extremely helpful and easy to understand!
Glad it was helpful! :) thanks for watching
Thank you, very useful tutorial series.
I'm wondering, why don't you have to filter the results from the fetch with the id props? is JSON Server already configured for that? Cheers!
Thanks for this incredible tutorials, Shaun.
btw, one way to not getting an error is making the "job" variable an object:
data() {
return {
job: {},
}
},
thanks so much, that was driving me crazy lol, i was wondering why it wasnt working
Such an excellent video! Thank you!
You're very welcome!
Thanks Shaun. Best tutorial ever. Just wanted to know whether you are planning on a MEVN stack or a sass tutorial and which UI com potent library do you recommend for vue.
Hey, I may do a full stack Vue project at some point but was thinking of using GraphQL. May also do a SASS refresh at some point too. I really like Vuetify for Vue 2, looking forward to it's new relase for v3 :)
@@NetNinja As long as it is Vue fullstack (graphQL or MEVN). Count me in.
@@learnsimple4592 @The Net Ninja me too.
@@NetNinja subscribed for more future content :)
Thank you for the thorough tutorial.❤
Hope it was helpful! thanks for watching :)
i wasn't able to run json-server so i installed it globally with 'npm install -g json-server' and it worked fine
A little hint: for chromium-based browsers (Chrome, Edge, I don't know about others) you can limit the network speed for the browser. This is done in the "Network" tab (where you have viewed the queries sent to the server) from the "Unlimited" option to one of the ready settings, eg "Fast 3G network" or "Slow 3G network" or any custom setting.
Regards
why would you do that?
@@kajganamakedonska1846 To better see what happens at 11:30. Also testing in general.
If you wish to show the "results loading ..." pages add "--delay (time in ms)" to the json-server command. I use 500 ms..
Is it a preference to using mounted vs created vs beforeMounted ?
Thanks :)
謝謝！
Thank you
so would you rarely fetch JSON data on a local file server?
thankss :)
Hi, from my experience you would fetch data in a created() life cycle hook, it's much better for handling get requests
at 4:00 , aren't yarn🧶installs better for Macs? with npm, a lot of the time you have to do a sudo install, which isn't advisable
Hi, can you create multiple fetch statements there?
After installing json-server it wouldn't let me use json-server in command line, to fix this I installed it globally adding the -g tag after "install" then installing it locally to the project. I'm not sure if anyone else has experienced this issue but if you are this is how you resolve that.
is there a tutorial of yours which you use database instead of a json?
How do I cancel my previous fetch request ? Let's say I was fetching a data on my project then while my page is still fetching I changed to another page route?
Hello, I have a question.
What if I want to use "job title" to search in the JSON array by the fetch function, rather than using "id"? Is there a way to do so?
Did you find a way to do this?
why use mounted hook and not beforemount or something like that so you dont have to write all the conditionals?
is it fetch automatic can call after install on package.json, not import the node-fetch
If you want to test "loading jobs...", you can add a delay to the response of the json server. This can be done by adding to the json-server command the --delay or -d and the the number of milliseconds you want the response to be delayed.
Or you can just press F12, go to network and change from 'online' to 'slow 3g'. With that you can test this too...
Awesome video!
One suggestion though: We should hope that the company always has at least one open job, otherwise the length of the array will stay 0 and "Loading" will be shown forever ;)
Why not pass the job as a prop to JobDetails? For production, would it be better performance because you don't fetch it twice? Thanks.
ty.
how setup vue auto-complete in vscode?
If we got error UI will present still loading bc we didnt change jobs.length or job if we got error but btw it was great tutorial. Its not hard to handle that case . Thank you
npx json-server --watch data/db.json = This command help me to watch file using json-server in windows.
doesn't work, that appear in my screen ; file:///C:/Users/aa/AppData/Roaming/npm/node_modules/json-server/lib/bin.js:4
import { parseArgs } from 'node:util';
^^^^^^^^^
SyntaxError: The requested module 'node:util' does not provide an export named 'parseArgs'
at ModuleJob._instantiate (node:internal/modules/esm/module_job:128:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:194:5)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
at async loadESM (node:internal/process/esm_loader:88:5)
at async handleMainPromise (node:internal/modules/run_main:61:12)
Finally you don't explain the lazy-loading route... what is the difference
If you face this issue "json-server : The term 'json-server' is not recognized as the name of a cmdlet, function, script file, or operable program"
Simpli write: npx json-server --watch src/data/db.json --port 3000. This will solve the above error and will host the json-server on your desired port (in this example on port 3000)
Hope this helped you, dear developer :)
Thanks, bro!
vue is the best!
agree
agree
keep making vue vids please
$ json-server -watch data/db.json (I got command not found: json-server)
I'm using MacOS with npm (6.14.4)
In order to solve this I had to uninstall json-server using:
$ npm uninstall json-server
and then install json-server globally using:
$ npm install -g json-server
thank you
i using axios and call api from MongoDB, however when i get the id from the job page it says detailJobs error 404 has format detailJobs/undefined
how to get data from list without using loop?
I am import array of data from api but i want to you use only one row,so please tell me how to get data using index number...
I have tried list[0].title but it shows error
vue is the best
how can we fetch data from a created database server for vue.js?
Note: at the 12 minute mark, if your getting a net::ERR_BLOCKED_BY_CLIENT error message....it is likely that it is your browser ad blocker! disable it, or use a different browser, this was the problem for me when using the brave browser, I just clicked the lion head and disabled it and it works fine
I doun't knaow the origin of your accent. Bot it's very charming I reeely like it!
Thank you! 😃 I'm from Manchester, UK!
@@NetNinja Hoooray! Again, many thanks to your great tutorial !
i got problem in section 5:26 and the problem is this : json-server : The term 'json-server' is not recognized as the name of a cmdlet, function, script file, or operable program.
Check the spelling of the name, or if a path was included, verify that the path is correct and try again.
At line:1 char:1 is there anyone can help me?
I undestand how make a list of items in json-server, but how to delete any item from my list using fetch request? how to address to exact id?
Hi there, I am just learning Vue and I am creating a map app. I have already placed a geolocation script to output the latitude and longitude values on the DOM but I don't know how to refer the data back to the server, do you have an clue what I should do/look for? Thank you!
Very helpful. I have fetched users with '/wp/v2/users' endpoint, but I can only get my own user data, I get a 401 error response when trying to get something like '/wp/v2/users/2'. How can I authenticate in order to get All Users data? I need to lists employees...
I tried adding a header argument to the fetch function but it didn't work, I'm guessing It's because headers had already been sent, but I'm new to WP API REST, and to Vuejs, so I don't really know... I'm simply adding Vuejs for a couple of pages, as a script file from a CDN. I only find information about classic ajax so I don't know how to authenticate through API REST and Vuejs
P.D. : I had already generated my application password, just don't know where/how to place credentials. Running WP 5.9.3
Pero de esta forma haces 2 peticiones, en la primera ya tienes todo, por qué no almacenarlo en vuex y desplegar la data necesaria por medio de su id?
The same way 'jobs' is not null because it's just an empty array (value), couldn't we set 'job' property to {} instead of null? So it would be an empty object and not null. Or is {} still a null value?
Why does this not cause the CORS policy problem? Can anyone please explain that to me?
"fetch data", does that mean fetch data from a database to memory? or to/from/ memory from/to the screen?
Thank you ! by japanese(日本人）
The mounted fetch request within JobDetails isn't working for me for some reason... if I have the (res => res.json()) portion in it, there's an unexpected character error that comes up. If I switch res.json() to res.text() that error goes away, but I get another error saying the requested localhost:3000/jobs/1 isn't found. Can anyone help me please?
add quotation marks to the ID in json file, like this:
{
"jobs": [
{
"id": "1",
"title": "Ninja UX Designer",
"details": "lorem"
},
{
"id": "2",
"title": "Ninja Web Developer",
"details": "lorem"
},
{
"id": "3",
"title": "Ninja Vue Developer",
"details": "lorem"
}
]
}
i can't get the data when I pass the id as a parameter to the API how you did that ?? I think you miss a part there ?? any idea
Watch 14:00
Great,but how i do this in composition api,how i get the id?
Use props or vue router and pass the Id with the params parameter
at 15:58 the problem can be fixed quickly if we set job : {}.
Hello sir,
I want to learn app development.
But I don't know which one to prefer "react-native" or "flutter". I know react js very well and also flutter a bit. Can you prefer which one is better.
if you know whats there to learn>?
Shaun what about angular course? Any plan to create one.?
I just think its better to cover on axios than fetch
Not really, it's much better to use the native Fetch for these type of cases.
Noobs favourite: Angular
Pro favourite: React
Hackers favourite: Vue
11:00
{
"jobs": [
{ "title": "Ninja UX Designer", "id": 1, "details": "lorem" },
{ "title": "Ninja Web Developer", "id": 2, "details": "lorem" },
{ "title": "Ninja Vue Developer", "id": 3, "details": "lorem" }
]
}
np ;)
9:00
Hmmm
What is your dog's name?
I don't have one, but if I did I would call it Yoshi :)
Wait then who's the cutie on your github pfp?
Is this tutor British?
Hey yes, I am from Manchester, England :)
I bought this tutorial and follow this part and it worked fine for me, until I had to use a json file with Pinia… I can GET mock data from my file and populate an array, but when it comes to POST new data I keep on receiving this error: "POST localhost:3000/borrowedBooks 500 (Internal Server Error)"
Any help would be highly appreciated!