Vue.js & FireStore – Build & Deploy

Vue.js & Firestore App – Build & Deploy [Part 3]

all right so we have the shell of our application done basically the just the UI we have materialized now we want to bring in our data and then output that

so firefire store has some pretty good documentation so if you go to firebase google.com slash Doc's slash fire store and over here on the side under cloud fire store you have some good

documentation if we go to query data and then get data this will show us how we can get a document so basically we need our collection in this case they have a collection called cities and then

they're calling dot get and then what that does is it returns a promise and we we handle promises with dot then and then a callback function inside there and then we can do what we want with

that data all right so what we're gonna do is go to our dashboard component that's where we're gonna work first I'm just gonna make that smaller and we want to first of all go to our data object

right here and we want to create a value called employees and we're gonna initially set that to just an empty array so this is the property that we want to fill when we fetch our data now

under data which ends right here by the way I'm using bracket colorizer which is really handy you can tell exactly where data ends because it's purple just like where it starts but we're gonna put a

comma here and we're gonna say created now when we use it this created method this is going to run when the component is created or when it's loaded so it'll automatically run now when it

automatically runs or it's automatically created we want to fetch the data from our collection now remember how we have our firebase and net if we look right here and we're exporting firestore from

here so that's basically our database so in dashboard right above the export default we're going to bring that in and we're going to bring it in as DB so we'll say import DB from

fire base and knit actually should be dot slash firebase and knit because we put it inside the components folder if it was outside here somewhere you'd have to make sure you have the correct path

so now we have this DB object to work with so in created we can say DB dot collection and we want to work with our employees collection which we created in the first video and we can say dot get

and then dot get takes in it's gonna return a promise so we want to do dot then alright and then inside here we want to put in a parameter of a query snapshot okay so query snapshot we're

gonna use an arrow function here so we're gonna go like that and then we want to take that query snapshot and we want to loop through we want to use dot for each okay and then for each takes in

a callback function I'm gonna use an arrow function here as well so I'm going to just say doc and then set that to a code block and then in here is where we want to take our data okay I want to

create a variable called data and set that equal to an object with all the data that we get from the document that's fetched from our fire store so this will actually run right away so

before I do any of the data let's just console dot log doc and see what we get so if I save this and let this componentry render we get this document snapshot and that's not what we want

what we want is actually in the prototype for this object and it's a function called data ok this function will give us the actual data so if we go back up here and say console to this

console log dot dot data like that which is a function or a method now you can see it's actually getting each each object so we can see the name the employ all that stuff now if we want to get

just the ID the firebase ID we can get that with dot dot ID so if I save that and just go down here you'll see it gives us each ID so we can get the firebase ID like that but the rest of

the fields we need to do dot dot data so just remember that and now we'll create our data object down here so this actually needs to be formatted with quotes like this and then ID and we can

set that to doc dot ID remember that's the firebase ID then we want our own employee ID that we created so we'll set that to doc dot data dot employee ID okay and then we'll do the name so the

name again will be dot dot data dot name and we want the department that'll be dark dot data dot de PT and then we want the position all right so now we have our data object

now we want to push this on to this employees property right here so all we have to do is go under where we define the data object and say this dot employees don't push and we want to push

on the data okay so we'll save that let's make sure we get no errors or anything okay we're not gonna see any anything in the UI yet but it is in fact being pushed on to

employees so now we should have access to it up here in the template so what I'm gonna do to render this is use a collection a materialized collection which is like a fancy unordered list so

and you can actually do it with a heading so I'm not going to use an h3 here what I'm going to do is put in a UL with the class of collection and also the class of width – header inside here

we'll put in an Li with the class of collection item I'm sorry collection header and we'll say we'll put an h4 and we'll say employees and then the next Li is where

we actually want to loop through and output each each employee so we're gonna put an li and we're going to use the V – for directive and we're going to set this to employee in employees okay

that's how we loop through if you're an angular user this is similar to ng 4 so we also need to include a unique key when we do this or we'll get an error so we're going to use V bind so you want to

be bind a key and we're going to set that to the employee ID so employee underscore ID or I'm sorry employee dot ID we're going to use the firebase ID so that's actually accessing this right

here the fire be not the employee ID all right so now that we have that let's just add a class to this list item which is for materialise called collection – item so

let's save that and let's why did I not put on I didn't put in an ending li okay so now this Li you can see there's three empty L eyes generating and there's three objects in our database so we just

want to go inside this Li and now put what we want to put in here so let's say employee dot name and now we're getting each name and this error is still down here but if I reload that should go away

all right so we have the names now I also want to put the department right here on the side actually I want to put the ID and the department so I'm going to go ahead and put in here a colon

before the name and then we'll put our double curly braces and we'll say employee dot employee underscore ID so that gives us the ID and then before that I'm gonna wrap I'm gonna create a

div with the class of chip which is a materialized class which is kind of like a label in bootstrap just gives it a background and some padding and in here we're gonna put in the employee dot DEP

tee and now you can see we get each one's Department now right now these aren't ordered I want these to be ordered by a department it looks like they are just because of the way that

that we did it but they're not if we want to order them by department we can go down to where we did our get so right here where we did dot get and then we did dot then right

before the dot get we can say dot order look I'm gonna say dot order by and then we can pass in here de PT and save alright it looks the same but now it'll definitely be ordered by

Department so there's some other stuff we need to do here I want the little I icon so we can click and we can go to the view page so in materialise we need to have a link

with the class of secondary content now remember we're not using links we're not using a tags we're using router link tags so I'm going to go right at the bottom here and we're gonna put in a

router link with a to attribute ok the router link I'm also going to give a class of secondary content ok and then the two we're gonna set that actually we're going to use a V bind so we're

gonna say V bind colon 2 equals and then in here we're gonna put some curly braces because we're not just going to a link we actually need to include a parameter which is the employee ID it

needs to know which employee to use in the view component the view employee component so we put name of the component which is view – employee and that name comes from the router if we

look right here view employee it also needs this employee ID so in addition to name we're gonna have params so put a comma and then params let me just close this up so params is gonna be another

object so we'll set that to another set of curly braces and we want to say employee underscore ID and set that to employee dot employee underscore ID okay which is coming from this right here

just like all the rest of these properties so that should work now inside the router link I want to put that I icon so it'll be an eye with the class of FA and also the class of FA –

ey e like that so let's save and now we have our little icon let's click it and it takes us to slash and then whatever that idea is so Sarah has the the employee ID of zero zero two if I click

that it brings us to zero zero two now we haven't added any mark up we haven't added a template here with that info what we're gonna have to do is get this from the I from the URL and then make

another fetch to fire store with that ID to get that that employee info alright so we're going to go ahead and do that in the next video

In this video we will fetch the employee collection list from Firestore and display them in our app as a Materialize collection.

CODE: Final Project
https://github.com/bradtraversy/vue_firestore_employeemanager

💖 BECOME A PATRON: Show support & get perks!
http://www.patreon.com/traversymedia

VISIT MY WEBISTE: Check Out My Udemy Courses
http://www.traversymedia.com

FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia
Posts by traversymedia
http://www.instagram.com/traversymedia
https://discord.gg/traversymedia