Vue & Firebase Real-time Chat (Preview) #5 - Props in Routes

okay so we have our welcome screen right now where we user types in their name and clicks enter chat now we need to figure out a way whereby we grab this name when they click this button and we push it into the next component the chat component so that the chat component knows what the name is so essentially what we'll be doing is passing in this name property into the chat component as a prop when we click this button and redirect them so we need to figure that out but first of all let's create the basics of this chat component so in the code let's create a new component by right-clicking over here go to a new file and call this chat dots of view okay so first of all we need a template and this template will be pretty simple to begin with a div with a class of chats and also a class of container okay now inside that we'll do an h2 and this will just say chat for now now we'll flesh out this template later but for now let's just do the script tag first of all and inside here we'll have our object the name is going to be chat and this needs to be a colon on that symbol okay and we also want to do our data function which returns an empty object we'll fill this in later okay finally let's do our style tag just in case we need to add any styles later okay so we have the basic component here for the chat window now I'd like to hook this up to our router so that if we go to forward slash chat we get this component right here so inside index J is inside the router file first of all we'll import that new component so import chat from and it's that's forward slash components forward slash chat okay now let's create our routes object for this component so a new object right here the path is going to be forward slash chat and the name of this route is going to be chat and finally the component will use is chat so now when a user goes to forward slash chat it should load up this component right here so let's save this and give it a whirl over here we'll go to forward slash chat and we see that component cool so this works okay so now we have this component set up what we'd like to do is when a user clicks on enter chat we take the name that they type in here and we pass it through into this chat component right here and redirect them to this component so first of all what we'll do is go into this component and we'll check that they first of all have in fact entered a name because we don't want to redirect them to the chat component if they've not entered a name yet so to do that inside this entered chat function will delete console dot log and we'll say if this name so if this name is null then we're not actually going to do this we'll do something else and the else will be to offer them some feedback now first of all we'll need to create a feedback property over here which will be null to begin with but if they try to click the button right here enter chat without inputting the name the else statement will run and we'll offer some feedback so we'll say this dot feedback is going to be now equal to you must enter a name to join okay now we want to output that feedback if they try to click this button without entering a name so we'll do that just above the button so we'll do a pee tag now this will only output if feedback is true now currently it's null which means it's false so we'll say V if on the P tag and we'll set it equal to feedback so for as long as this is null then we won't offer that feedback if it's not null then we will offer this feedback so we'll output it right here like so now we also want to give this a class of red text to make it red and stand out all right so first of all let's try this out if I now try to enter the chat without entering a name it's just gonna feed me back this information right here okay then so now if they do enter a name then we want to fire this bit right here and what we'd like to do is first of all redirect them to the chat component so let's do that first of all I'll say this dots router with a dollar before it remember this is how we access the router object to redirect users and then we redirect them by saying we want to push on to the router so this takes an object as a parameter this method and we can pass through some options into this object now one of those options is the name and that is the name of the component we want to redirect them to now we call the name of the chat component right here chat so let's grab that and paste it in right here okay so we're redirecting them to the chat component now now let's see if this works I'll just enter in any old name Mario and enter chat and we forwards denounced in the chat room but we still don't have access to that Mario name so we now need to figure out how to pass through that name Mario as a prop into this thing right here and there's a couple of steps to doing that first of all we need to go into our router file over here and inside this route object we need to tell it that we want to accept props as parameters when we redirect them into this route so the way we do that is by simply adding on a new property here called props and we'll set that to true so now when we enter this route right here it's expecting to have props passed to the new component okay now the prop we want to pass is the name so first of all we need to go into our chat component because when we pass props into a component remember we need to also accept them into components and to do that we need to add on a props property right here inside this component so the props that we want to accept are the name props or rather the name prop so now we've said to the router lot we want to plus a prop through to this component when we redirect them or go to this routes and we also inside the component are now accepting the prop called name so the last thing for us to do is actually pass this prop into this component when we redirect them now that is pretty simple to do we'll go to our welcome screen over here where we redirect them and after this name property we want to add another option now surprisingly this is not props as you might think it would be but in fact we use the params option right here now we've seen this before when we're passing through a route parameter right now we use the same option when we're passing through a prop as well it's just that now we've done a bit of extra configuration we've said that we're passing through props and we're accepting that prop because this time we're not passing through the parameter in the actual routes it's not going to be /ch at /the name of the person we're just passing it through as a prop which is not going to be seen inside the URL so the prop that we want to send is going to be called name because that's what we're expecting to accept right here the name and we'll set this equal to this name right here so we can access that by saying this dot name so we're redirecting them now to the chat component and we're passing through a parameter which is actually passing a prop and we've said that we want to accept that prop in here now this name right here name and this thing over here they must be the same thing because we're passing one thing and accepting one thing right they must equal the same thing so let's save that now and view it in a browser and see if this works we'll go back to the welcome screen and say Mario and in fact we can only find out if it works if we actually do something with that prop inside here so why not let's just output it this name because remember when we accept props and we get data like this inside a component we have access to them now by just saying this doc name much like we would have access to any data down here on this object so let's output this and Mario will be our name enter chap and now we can see chat Mario let's try a different one Luigi enter Chat Chat Luigi awesome and notice it's not that parameter up here it's not forward slash chat forward slash Luigi right here it's just forward slash chat and we're grabbing that name as a prop