Vuetify Tutorial #15 - Dummy Project Data

Key Takeaways

all right then so we have a single card right here a single Row for one single project using the grid but what I'd like to do is create some data down here and that data is going to contain a list of projects then we want to cycle through all those projects and output a different project a new card for each of those projects so let's do that down here let us first of all Define our data and this returns an object and inside this object I'm just going to paste this property called projects it's an array and you can get this off the GitHub page the link is down below and each object represents a single project it has a title it also has a person right here it also has a due date it has a status and some content which is just lauram ipsum all the way over there all right so we have all of that information on each individual project so we want to cycle through these now and output that information a new card for each one so then letters say V hyphen four on the card so we're going to Output a new card for each project and it's going to be project in projects because that's the name of our data projects so we're cycling through these now we need to bind some data to the key property and that has to be something that is unique so I'm just going to use the project. tile remember it's project because we call it a single project right here all right then so now down here we can output the data from each one of these objects so instead of hardcoding create a new website I'm going to Output project. tile which is the first property then instead of the person I'm going to Output project. person and then I'm going to down here output project and I think it's called due the property so let's have a look uh due yeah and then down here we need the status so we can output project do status so now we should get a new card for each individual project and therefore a new row for each individual project so let's save this and view it in a browser and that is looking all right to me what I'd like to do now is just add some classes to each one of these things right here so this row this layout I'm going to give a class and set that equal to something now then what I'd like to do is give this a dynamic class based on the status of each project so we have status property down here right and that status is either ongoing complete or overdue so what I'd like to do is when we're cycling through these different rows and we're outputting a new card and a new row for each individual item is give this a class for whatever status this project has so it could have a class of ongoing or of overdue or of complete so because we want to bind data here we're going to use a colon now I also want to give it a class of project as well and maybe a class to give it some padding so I can't just type in here project. status because we want to give it other classes as well so instead we're going to use an es6 template string and we do that by using back ticks like so and this means we can create a normal string but also output Dynamic variables in this string so for example if I want padding I can say PA hyphen 3 and give it that class then if I want a class of project I can do that as well but if I also want a class of this thing down here the status I can do that as well and the way we do that inside this template string is by doing a dollar sign first of all then single curly braces then the variable name so project do status like so so now each one of these is going to have a class of pa3 project and either ongoing complete or overdue so let's save that and just see what this looks like if we inspect this inside Dev tools I'm going to make this a bit bigger so we can see and move this over so now we can see each one of these if we make this a little bigger has this thing right here okay so at the minute it's not outputting the actual variable so so let's take a look at what's going wrong here and that's stupidly because I've used a percentage sign instead of the dollar so okay let's save that and go over and have a look again and now we can see this one has a class right here of ongoing if we go down to the next project and this one has a class of complete and this one has a class of complete as well and this one overdue so now they all have the own unique class and we can use that now to style each one a bit differently so for for example if I want to give this a little color on the left dependent on that class I can do we can color coordinate the status so that's what I'm going to do I'm going to come down to the bottom over here and create a style tag and inside that style I'm going to grab first of all a project because it also has a class of project then dot complete so anything with a class of project and complete and inside that I'm going to say the Border left is going to be four pixels ID and then a hex code of 3 C D1 C2 all right now I'm going to do the same thing for overdue and ongoing I'm just going to paste these though from my repo and you can see project. ongoing and project. over both have a border left of solid four pixels this one is orange and this one is tomato so we have green and orange and then tomato color so then what we're basically doing is saying okay if a project is overdue give it that overdue class and what we're going to do is give this a border left of this red color if it's ongoing it's going to have an orangey color on the border if it's complete it's going to have this green color so we're color coordinating these projects based on the actual status of it now I notice we've got some padding over here which doesn't look right so I'm going to go to the card itself and take off that class I don't think we need that padding anymore so let's save that and view it in a browser and that is looking a bit better now now I'd also like a little divider between each one of these projects so what I'm going to do at the bottom of each card is just use vyen divider to do that save that and view that and now we get that little line at the bottom as well and that is looking pretty good so now we have our project output to do this we're using a combination of data we're cycling through that using V4 right here we're giving each one of these rows a unique class right here based on the project status and styling that differently and we're using the grid system to Output that data on the screen in rows so this is looking pretty good but in the next video what I'd like to do is take a little look at chips to style these things better over here