From the course: Vue.js 2 for Web Designers

Make a plan - Vue.js Tutorial

From the course: Vue.js 2 for Web Designers

Start my 1-month free trial

Make a plan

“

- [Instructor] In this video, we're going to take a look at our next project, and plan out the components and data we think we'll need. This is a static mock-up with no interactivity, but it gives us the idea. It's for another fictitious brand, Leaf & Mortar, and the goal is to build a filterable directory of the people who work at this landscape architecture firm. We can filter by name, by job type, and whether the person is an intern. The list of people down here should update live with the form fields. So as we start to type a person's name, the people who don't match it should go away. As far as the components, we're going to need a root component for the whole thing, and we'll probably need one or more components to handle this filter form, and then of course the list of people, which could be just a single component by itself, or it could be, say, a people component, and inside it could be a bunch of person components. With other frameworks, having a component that contains a list of other components is pretty common, because view includes V4 to iterate over things, you might not need to have those as often, and we probably won't here. Now in terms of the data, we're going to need to track the values of all of these form fields, the name, title, and the intern flag. We'll need to track the list of people, and that will be subject to the state of the filters at the time. So who's actually in the list at any given point will change, depending on what filters we've set up here in the form. Now let's take a look at the actual data we're going to use to power all this. Over here in my editor, I've opened the Chapter Three data file from the Assets folder. This contains all the data we'll be using. Most of this file is the list of people. Here in the People key inside Leaf & Mortar Directory. This looks just like you expect a web service to provide, except that just like in our first project, this is a static JSON file. Down at the bottom, I'm going to scroll down all the way and use Command-down arrow. Here is another key, which is the titles. And so these are the various titles that would appear in the Job Types form with displayed labels and keys that would be used as the search value. And I can see that says Support Stuff, let's change that to Staff. One thing to note is that this Form component and the List of People component are going to need to share the data of who is in the list. The filters are going to be filtering that list, and this component will be displaying that same data. So, that concludes our tour of the data we have, what we're planning to set up in our view instance, and the components we anticipate. So now it's time to start building.

Contents