Build a Component and Pass Props to It in Vue
We'll use the app.component function to make a component and add it to our template. We'll pass through props into the component and use these to initialize the state of our component.
In this component, we'll accept data with the props key, display the data with the template key and bind data in our data key in our component config object. By doing so we'll be able to select the number of tickets that we would like to buy at each ticket type level.
Instructor: [0:00] I'm going to create a directory called components. In that directory, I'm going to create a file called ticket-details.js.
[0:10] The Vue app has another helper function. We've used create app before. It has another helper function called component. Like the create app, it accepts a configuration object, but that's the second argument. The first argument is the name of the component.
[0:26] In this case, our component is called Ticket details. The first property of this configuration object we'll set is the template. The template takes a string literal of what we want to render. In our case, we want to take what we accepted here. Let's take this whole div.
[0:45] We don't need this v-for anymore. We're not going to need this type, and we're not going to need this type. here either.
[0:52] We can see where we're going to want to set the name under description. These are props that we're going to parse into our component. The next thing I'm going to set is the props key. The props key accepts an object. That object takes the name of the prop, and also its type.
[1:10] Our name is going to be a string. Our description is going to be a string. We're also going to accept the number of tickets that each ticket type has. We'll set that as a number. Now, we'll go back to our index.html. Below our main.js, we are going to import our components ticket details, like that. Below our ticket types, we're going to have our ticket details component.
[1:36] We can close it like that, or we can use a self-closing tag like that. We want this v-for every type and ticket types. We need to pass in the props. We want to v-bind the name to type.name. We want to v-bind the description to type.description. Let's v-bind tickets to type.tickets.
[2:03] Back in our component then, let's develop our dropdown. We want our select to control how many tickets of this type we want to buy. That's something we want to control within this component. We're going to have a data function, which like in our main app, is going to return our props that we want to use within this component.
[2:24] Let's have this to be ticketsToBuy, and initialize it at zero. Let's v-model our select on ticketsToBuy. By default, we're going to start with zero. Let's give ourselves some options. There's a version of v-for that gives a numerical range from one up to the value. Let's take a number. For number in tickets, let's set the value to number and render number. We can see for bronze, that says 1, 2, 3. For silver, it goes down to 10. For gold, I think it went up to 40.
[3:01] You also see that zero isn't added there, because this v-for range version of that starts at one. We'll need to add in an extra option where the value equals zero and the outputted text equals zero. Now, we can see we can do that.
[3:18] In our Vue tools, we can see our root, but we also now have anonymous components. We can see ticketsToBuy is zero. As I change the goal, ticketsToBuy, it changes based on the select. If I go to pass over, equally, it changes as I change it, ticketsToBuy changes.