Vue 3 Crash Course | Building an app for beginners

welcome to view mastery's intro to view three course we're going to take a journey through the view universe to explore the technology and build a solid foundation of view skills so we can build upon that to head towards view mastery this course is your first step along the way and on our platform we have a whole library of courses you can take now let's take a look at the app we're going to be building throughout this course as you can see we're going to be building a product page when we click the add to cart button we can add the product to our cart and when we hover our mouse over these colors we can change the image and you'll see one of our products is out of stock and we're disabling the button so we can't add that one to the cart if we scroll down here you'll see we have a form where we can add reviews so we'll learn the basics of building forms with view and by the end of the course we'll understand the fundamentals of how to build a view app to get the most out of this course you're going to want to be coding along and there's two ways to do that depending on your experience level if you're newer to programming you're going to want to click on the link below this video that takes you over to our codepen there you'll find our starting code and you can click on this fork button to fork the project to your personal account however with the free codepen account you can only have one project at a time so if you already have a project in your account you're gonna have to delete it out to make a new one for this course on the other hand if you have a little more experience with programming and using git and github you're going to want to head over to our repo clone the project and then from there you can switch between different branches for the starting and ending code for each lesson for example in the next lesson lesson 2 you can check out l2 start or l2 dash end for the starting and ending code respectively throughout this course you're going to see me using ds code and i do recommend that for view development but if you already have a code editor of your choice you can stick with that one but if you want to use vs code and you don't already have it you're going to want to download that now and also install an extension es6 string html you'll see why this extension will be useful in later lessons and finally at the end of each lesson you'll see a coding challenge so you can put the concepts into practice now if you're ready let's create our first view app in the next lesson in this lesson we're going to look at the starting code and learn how to create a view app as i mentioned in the last lesson you can either check out the starting code from the repo or head over to codepen to get started there to take a tour of the starting code you'll see we have an assets directory inside of there there is a directory for our images we've got one for blue sox and green socks then we've got a css file for all of our styles inside of the index.html we're importing those styles and below that we are importing view importing the view library this way is the simplest possible way to start using view you'll notice at the time of this recording i'm using the view 3 beta cdn link but if you're watching this and view three is already out you're going to want to go to the official vue.js documentation click on the installation tab and then scroll down and copy this cdn link for prototyping and learning purposes this gives you helpful warnings and error messages during development so you can just copy that latest cdn link and replace it in this script tag at the bottom of the file you'll see we're importing our main.js file so let's take a look at that so far it's very simple it's just a constant called product equals socks you'll notice that in the template we've got this h1 here and it says product goes here so the question now is how do we display product using view well first we're gonna have to create a view app so let's get that started in our main js we'll delete this out and create a constant called app and we'll say view which we have access to because we installed it via that script tag dot create app and this will do exactly what it says it's going to create our view app as an argument we're going to pass in an object and add a data property this is going to be a function which returns another object where we'll store our data so here we'll add that product back in now as a data item to simplify this syntax i'm going to switch this out with the es6 shorthand now that we've created our app i'm going to change this comment to say import app because we're not just importing some javascript we're now importing an entire view app and i'm going to make another comment below here that says mount app and add a script tag so that we can mount the app that we just created into our dom so i'll create a constant called mounted app and set that equal to app that refers to the app that we just imported and then dot mount inside of the mount method we'll add an argument which is a dom selector used to plug the app into a piece of our dom such as this div with the id of app now here in the h1 we'll switch this out for this double curly brace syntax inside of which we'll say product referring to product in our data now that we've created our view app and plugged it into the dom we should be seeing socks appear when we render this page checking it out in browser looks like it's working awesome but how exactly is this working let's take a look when we created our view app we said const app equals view dot create app then we passed in the options object this allows us to add some optional properties in order to configure our application and even though it's called the options object it is not optional so you're always going to have to pass in at least an empty object to get it started doing this creates our view instance which is the heart of our view application which powers everything on that options object we added our data option which returned an object full of our data as of now it's just product whose value is sox we then imported our app into our html file and then mounted it into the dom which effectively plugged our app into that div with the id of app now at this point that div and everything within it has access to our view app so if you're wondering what's happening with this double curly brace syntax you can imagine it like a phone which has access to a phone within our view app and we're able to ask the app hey what's the value of product and the app responds sucks so when the page renders we see socks display on the page if this double curly brace syntax or mustache syntax is new to you it allows us to write javascript expressions in other words it allows us to run valid javascript within our html so we could be doing things like concatenating strings running conditional logic with a ternary operator running methods on our data and so on so back in the diagram if we were to change thoughts to boots our expression would receive that new value and our dom would update but how exactly is that happening well the answer is that view is reactive underneath the hood view has an entire reactivity system that handles updating so when a data value changes anywhere relying on that data value is going to automatically update for us we don't have to do anything to make that happen as a side note here on view mastery we have an entire view 3 reactivity course so if you're interested in exploring the reactivity system under the hood you can take that advanced course later if we were using product in multiple places within our template and product were to update every place that was using that value is going to update again this is all thanks to views reactivity system by popping open the dev tools we can see reactivity happening live in the browser if i say mounted app then product which is that data value i can update it to shoes and when i hit enter our dom is going to update automatically i'll do the same for sandals hit enter and there it goes updating reactively and that brings us to the end of the lesson and to our first coding challenge now you'll want to add a product description to the data object then display that description using an expression within a p tag you'll find a link to the challenge's solution code below this video as a reminder if you're coding along with our repo you can check out the ending code as well so for this one it would be l2 dash end in this lesson we're going to look at the concept of attribute binding let's get started if you're coding along with this repo you can open up your terminal and say git checkout l3-start this is going to pull up the starting code for this lesson you'll see we now have more divs within our template and in this lesson we're going to be focusing on this div with the class product image inside here you see this comment that says image goes here so we're going to look at using attribute binding to display an image here once we get this to work we're going to be displaying the image right here within our app remember that in our assets directory we have this folder with these images so in order to target one of those images we're going to add a new data property to our view app we'll say image and set that equal to a path dot forward slash assets slash images socks.underscoregreen.jpg now we're ready to add an image element here in the source attribute we'll say image and we want to be pulling in the path from our image data much like we pulled in the product data in the h1 below using that expression so the question here is how do we bind the attribute src to image to do that we're going to say v dash bind and then colon this is the v bind directive now we've created a bond between what lives in this attribute and the data itself so now looking in the browser we see our image displaying so let's understand how vbine works we use vbind to dynamically bind an attribute to an expression in this case the attribute is src and the expression is here in the quotes so we've created this bond between the attribute and the value of the expression if you're thinking to yourself this doesn't look like a javascript expression you can imagine it looking like this because underneath the hood view is going to evaluate this just the same so when we say image here view knows that we're referring to image in our data and when our app renders the expression essentially asks the view app what is the value of image it evaluates to that image path allowing us to pull in and display that image and because of view's reactivity system if we updated this to the blue image the expression that our source attribute is bound to would update and our browser would display the new image using v-bind to bind to attributes like this is super common so common that there is a shorthand for a v bind and it's just the colon like so and as you can imagine since there are so many different html attributes there's a lot of use cases for vbind for example you might be binding a description to an alt attribute binding a url to an href binding some dynamic styles to a class or style attribute disabling a button with v bind and so on now we've reached the end of the lesson and on to our second challenge add a url to the data object then use vbind to bind that url to an anchor tags href attribute as a reminder if you're coding along with our repo you can check out the ending code as well so for this one it would be l3 dash end in this lesson we're going to look at conditional rendering specifically we're going to want to be displaying in stock or out of stock depending upon a condition whether this product is in stock or not if you're coding along you can check out to this branch which is l4 dash start so in our code we're going to add a p tag that says in stock and another that says out of stock again we only want one of these to show up depending on if our product is in stock or not so we'll head into our data object and add a new in stock property which is going to be a boolean we'll initialize that to true over on the p tag we're going to use a new directive the the if directive so we'll say v if equals in stock and on the second p tag we're going to say v else this is probably pretty self-explanatory but here we're saying if in stock is true show the first p tag otherwise or v else show the second p tag and because in stock is currently true we're going to show the first one so looking at this in the browser we're displaying in stock great and to make sure this is working we'll change in stock to false which should cause our second p tag to display and there it is just as expected it's worth noting here that you don't always need to pair a v if with a v else if you have just one element that you want to be displaying or not you can just say v if on that element you don't need a fallback element with v else beneath it so here if our in stock data value is true we're going to be displaying that p tag another way to accomplish this same behavior is to use v show this is used for toggling an element's visibility instead of adding and removing the element from the dom like v if does v show simply toggles the element's visibility so as you can imagine this is the more performant option if you have something that's toggling often on the screen often like a modal for example so since in stock is true our element is visible but let's look at what happens when in stock is false in this case in the dev tools i've highlighted the p tag and pay attention to what happens when i refresh see how now we have this inline style display none so really the element hasn't gone anywhere it was just hidden with that style that v show added to it so we just looked at the differences between v if and v show earlier we looked at v if with v else now let's take a look at how we can add additional layers of conditional logic to do this i'm going to change in stock to inventory and instead of a boolean let's make it an integer and set it to 100 now we can say if inventory is greater than 10 show in stock and just to make sure this is working we are indeed showing in stock so so far so good now i want to show you how we can add those additional layers of logic in between here so if i add a new p tag that says almost sold out i can add the directive the else if and in this expression i'll say if inventory is less than or equal to 10 and inventory is greater than zero in that condition we want to display almost sold out otherwise if inventory is zero show out of stock to demo this i'll put eight which is less than 10 and greater than zero and in the browser when i refresh we'll see almost sold out and of course if inventory is zero we'll default to the final level of the else and display out of stock perfect to make this conditional logic a little more concrete i like to envision it like this where we've got this ball that stops at the level that evaluates to true so if inventory is 100 that's greater than 10 so we stop at the first level but as soon as inventory turns to something less than or equal to 10 and greater than zero such as eight we stop at the middle level and finally when inventory is zero our ball of truth falls down to the final level so that brings us to the end of this concept and to our coding challenge add an on sale boolean to the data object then use that to conditionally render a p tag that says on sale whenever on sale is true and a reminder if you want to check out the ending code for this lesson you'll want to go to l4 dash end see in the next lesson in this lesson we're going to look at rendering lists within the view app if we check out the starting code which you can access if you're following along at l5-start we'll see that we now have this array of details so the question now is how do we display details as a list so we'll create an unordered list and on this li inside of it we're going to add another view directive this is the v4 directive and inside this expression we'll say detail in details referring to the details array in our data and in the inner html we'll add an expression and say detail so that we can print out each detail or each element from the details array if we check this out in the browser we can see that we're rendering our list but how is v4 actually working well as you might imagine v4 works like a for loop again on this li element we added the v4 directive so here in the expression we're specifying what we want to loop over in this case we're looping over details this is the collection that we're iterating over and detail is the alias for the element at the given time of that iteration and we're printing out each detail as we loop through so it's kind of like v4 functions like a conveyor belt for looping over and printing out your data taking each element from your array and rendering it out accordingly now that we have a better understanding of how v4 works let's look at another example within our app in this case now we have a variance array and we have an object for each variant of our product each product has an id and a color so for our next task we're going to print out each variant color so we'll add a div and then say v4 variant that's the alias in variance the collection that we're iterating over and then in the inner html use an expression that says variant.color so if we check this out in the browser we should now see two divs one with the string green one with blue so refreshing the browser awesome it works it's worth noting here that when you're creating lists like this with v4 you're going to want to give each list item a unique key so let's look at setting the key attribute on our div we'll use the shorthand for vbind on the key attribute and set that equal to variant.id this gives each dom element a unique key so that view can essentially grasp onto the element and not lose track of it as things update and change within your app this provides us some performance improvements and also later down the line if you're doing something like animating your elements you'll find that the key attribute is really helpful with things like that [Music] so that's it for this lesson on list rendering and now for our coding challenge add an array of sizes to the data object then use v4 to display them in a list as always you can check out the ending code at l5-end in this lesson we're going to look at event handling within a view app if you're coding along you can check out the l6-start branch in that new starting code you'll see that we now have an add cart button along with a cart so you're probably able to guess what we're about to do in this lesson we want to be able to click that button and add this item to the cart so let's make that happen looking at the code you can see we have this div for the cart and it's using an expression to print out the value of cart from our data and if we scroll down we can find the button we want to add the ability to be able to listen for events on this button specifically click events so how do we get that to happen well you might not be surprised that we're going to use another view directive this time this one is called v on and we can pass this directive an argument that specifies the event we're listening for and in the expression this is the logic that we're triggering when that event happens in this case we're incrementing our cart by a value of 1. so let's check out this behavior in the browser as we click on the button we're incrementing the value of cart which we can see displayed in real time currently the logic inside of our v ons version is very simple so we could keep it in line like so but often we need to trigger more complex logic so in those situations we can add a method name to fire when that event happens so we'll switch this out for a method that we'll write soon called add to cart and down inside of our view app just like we have a property for our data we can add one for methods so inside of this methods object we'll add the add to cart method inside of this we'll say this.cart referring to this cart within our data and increment the value of that cart with plus equals 1. in the browser we're seeing the same behavior but now it's all encapsulated within that method let's take a deeper look into how this event handling is working so by adding v onto an element we're essentially giving it a listener or an ear that can listen for events in this case we've specified that we're listening for click events and when that event happens we want the add to cart method to run which as we just saw takes the value of cart and increments it by one as you can imagine listening for events on your elements is super common so just like how v bind had a shorthand v on has a shorthand too and it's just the at symbol like so now that we understand the basics of event handling let's listen for another kind of event within our view app currently we're printing out the variant colors green and blue but wouldn't it be nice if when we hovered over green and blue we triggered an update of the image to the green and blue image respectively so let's implement this feature where we listen for hover events on our variant divs because we want to update the image that we're displaying when we hover on the variant colors i've added a new property to each variant object now each variant has an image path for the green and blue socks respectively so on that div we'll use the shorthand for v on and say at mouseover which is the view version of hover and when that event happens we want to run a method to update our image and we'll feed that method the variant image using dot notation now we can add that method below and set a parameter of variant image because inside of this method we'll say this dot image and set that equal to the varying image that we just passed in now in the browser when we hover over the green and blue string we're seeing the green and blue image and with that we've come to the end of the lesson into our coding challenge create a new button that decrements the value of cart as always you can check out the ending code at l6-end [Music] in this lesson we're going to learn about class and style binding let's get started if you're coding along you can check out the l7-star branch in the last lesson we added the feature where if you hover over the green and blue div you update the varying image but wouldn't the user experience be just a little bit nicer if instead of hovering over the word green and blue we hovered over the actual color green and blue so the question is how can we show the varying colors themselves using style binding before we get that style binding working however i'm going to add a new class to this variant div that class is going to be called color circle and if we look at that class in our css file we'll see that it essentially styles our div as a 50 by 50 pixel circle now that the div is starting to look how we want it to we can move on to the actual style binding where we use the color name to set the background color of this div so back in vs code i'm going to use the shorthand for v bind on this style attribute and in the expression i'm going to add a style object like i said we're going to update the background color and set that equal to the variant color now looking in the browser instead of displaying just those color names we're displaying the actual colors cool so now that that is working let's understand on a deeper level how this is all working under the hood on our div we added the style attribute and bound a style object to it that style object has the css property of background color and we're setting that equal to whatever the variant color is at the time of that v4 iteration so in the first iteration variant.color is green so view takes that information and converts it into the code style equals background color green and prints out the green background circle in the next loop variant color evaluates to blue so view prints out a blue background circle pretty simple there's some important things to consider when using style binding like this so remember we're within an object here inside of this expression remember that this style object is all javascript so that's why i used camelcase in this property name if i had said background dash color because we're in javascript that would have been interpreted as a minus sign but we're not doing any math here we're setting a css property name so our options are either camel cased or alternatively we could use kebab case but we have to put that property name within quotes like so you might want to add a bunch of styles but adding that all in line can get messy so in situations like those we could bind to an entire object that lives within our data including all those styles within there so in this case when this renders we would have added each property from this style object within our data back in our app you'll notice that when our in-stock value is false we can still add the item to the cart but if the item is out of stock maybe we don't even want the user to be able to add it to the cart so let's change up the behavior here let's make the button disabled whenever in stock is false to get this feature started we'll use the shorthand for vbind on the disabled attribute and add that attribute whenever our product is not in stock in other words whenever in stock is false now because in stock is false the button is disabled so when we click it we're not running that add to cart method but the button still looks clickable so let's use class binding to add a disabled button class you'll see in our css file that we have this disable button class which sets the background color to gray and makes the cursor not allowed so we're going to use class finding to conditionally add this class whenever in stock is false we'll use the shorthand for vbind on the class attribute and pass in an object which includes the class name that we want to add whenever our product is not in stock now because in-stock is false not only is this button disabled but it also appears to be disabled if we pop open the dev tools real quick and say mounted app dot in stock and set that to true we'll see that our button is now active and usable again when getting started with class binding there are some things to note for example what happens when we already have an existing class such as color circle and we wanted to conditionally add an active class based on the truthiness of activeclass within our data let's look at this example in the class binding here active is the class name and activeclass is really a condition that we're evaluating to determine if we're adding the active class or not so because activeclass in our data is true we're going to add the class of active to this div at this point you might be wondering what's going to happen here because we already have the color circle class and we're adding another class the active class how does that look well when this actually renders out those classes are going to be combined like so a helpful tool that class binding gives you is the ability to use inline ternary operators so here we can use this array syntax and add the active class whenever is active is true otherwise we could add an entirely different class or none at all in this case because is active is true we are indeed adding the active class the variations in syntax and use cases that i just showed you with class and style binding is only the start so i do recommend checking out the vue docs for more use cases and examples for now this brings us to the end of the lesson into our coding challenge bind the out of stock image class to the image whenever in stock is false you can find this lesson's ending code at the l7 end branch in this lesson we're going to learn about the concept of computed properties let's get started if you're coding along you can check out the l8 start branch and you'll notice we have a new data property a brand of view mastery now what if we wanted to combine the brand and the product in our template for example up here in the expression within the h1 we could say brand plus a space plus product and if we check that out in the browser we'll see view mastery socks displayed but wouldn't it be neat if our app had the ability to compute that value for us for example taking the brand and the product adding them together and returning that new value well these are the kind of things that computed properties allow us to do so now let's encapsulate this behavior inside of a computed property we'll cut out this logic here and replace it for the word title this will be the name of a new computer property that we'll add below so down here we'll add computed then create a computed property called title and inside of here it's going to return this dot brand plus a space plus this dot product now heading into the browser we still see view mastery socks except now that value was calculated for us by a computed property but how exactly are computed properties working let's take a deeper look i like to think of computed properties kind of like a calculator because they calculate or compute values for us in this case it's computing the value of brand plus a space plus product that of course equals viewmastery socks and the benefit of computer properties is that they cache the value so it stores it away and only updates when it needs to when one of its dependencies change for example if the brand were to change from view mastery to node mastery our computer property would receive that new dependency then recalculate and return the new value looking back at our app so far we're updating the variant image based off of which color circle we're currently hovered on but what if each variant had a different quantity for example one could be in stock and the other could be out of stock we really should be updating whether we're displaying in stock and otta stock based on the variance quantity so let's head into our code and make that happen to review when we mouse over these variant divs we're updating the image based off of one of these image paths in our variant and as you'll see each variant now has a quantity and our green socks have 50 while the blue socks have zero in other words the blue sox are out of stock so let's refactor our code so we're updating the image and in stock with computed properties when the mouse over event happens we're now going to trigger a new method called update variant and it's going to take in the index to get access to the index we'll pass it in as a second parameter in our v4 like so now down here in our data we're going to remove image and instead we'll use selected variant and we'll initialize it as 0 because we're going to update this with the index of the variant that's currently hovered on we'll also delete out in stock because again both in stock and image are now going to be computed properties but first we're going to change update image to update variant which takes in the index of the currently hovered on variant and sets this dot selected variant equal to that index to test to make sure this is working we're going to console log index if we check this out in the browser as we hover over these variant color circles in the console we'll see their indexes logged 0 and 1 respectively also notice we have this warning property image was accessed during render but is not defined on instance so what is this referring to well here is where our image is supposed to be showing because in our template we have this image element and its source attribute is bound to image but remember we just deleted image from our data hence the warning that it's not defined on the instance and now we're going to replace image and in stock with a computed property so back in our code we're going to clean out this console log and inside of computed we'll add the image property which returns this dot variance and we'll target the first or second one using this dot selected variant which again is the index so zero would target the first one and one targets the second one now we can simply use dot notation to grab the image of these variants we'll do the same thing for in stock which also returns this stop variance targeting the selected variant and grabbing its quantity checking this out in the browser when we hover over the color circles not only are we updating the variant image but we're also displaying whether that variant is in stock or out of stock using its quantity and if you're wondering how this is automatically updating for us where the out of stock and in stock is toggling and the button is enabling and disabling that's because in our template we're still using in stock now in stock is not a data property it's a computed property and with that we've come to the end of the lesson into our coding challenge add an on sale boolean to the data then use a computed property to display the string brand plus product is on sale whenever on sale is true to access the ending code you can check out l8-end in this lesson we're going to look at components and props in modern front-end javascript frameworks components are the building blocks of an app and that's certainly the case with vue you can imagine them a bit like legos that you can plug into each other in this component hierarchy which when rendered creates your application like so looking at this website for example this website may be composed of multiple components and a given component may actually be a parent component meaning it has child components nested within it like so so let's head into our application and create our first component if you're coding along you can check out the l9-start branch because our app will have multiple components we'll create a components folder inside of which we'll create our first component called productdisplay.js inside of here we'll write app.component and the first argument is the component name product display in this case and the second argument is an object to configure our component we'll add the template property then head into the index.html to grab all of this product related template code we'll leave the nav bar and the cart here because these are global these are not component specific heading back into product display we'll add the comment here html this activates the es6 string html extension that we looked at in the first lesson notice when i paste the template code into these back ticks we get this syntax highlighting but when i deactivate the extension that highlighting goes away but of course we want that syntax highlighting so we're going to leave that and scroll down below this template literal where we now need to add our data methods and computed properties those still live in maine.js so we'll copy this here and paste it into our product display component we'll just delete cart here because we don't need each product to have its own cart that needs to be a global thing that's separate from our product component now back in main.js we can delete the computed properties delete out the methods but leave the option because we'll add a new method later and we'll delete out all this product specific data leaving just that cart now we'll head into our index.html so that we can import our component in the source here we'll go into our components directory and grab the product display component now that it's imported we can use it within our template if we check this out in the browser you can see all that code is still showing up just like it was before but now since we've rearranged things that button is no longer adding to the cart we'll fix that in the next lesson for now to show you how helpful these reusable blocks of code can be i'm going to paste two more product display components and when we refresh the browser we'll see them all showing up each of which are independently functional now that we're starting to learn how to encapsulate reusable code into these components what happens when our component needs something that is outside of itself for example what if the parent so to speak had this message data and the child needed it because a component has its own isolated scope it can't reach up outside of itself to grab something that's outside of its scope so the answer here is props these are custom attributes for passing data into a component they function kind of like a funnel into which you can pass the data that component needs let's add the ability for our product display component to take in a prop if our main.js had a new data property premium which indicated whether the user was a premium user or not we can add a premium prop to our product display component so that it can receive that value so we'll add the props option specifying we're expecting a premium prop and we can even set some prop validation specifying that premium is of type boolean and is required now that we've configured this we can add that custom attribute onto the component where we're using it we'll write premium which functions like a funnel where we can pass in that premium data that lives in main.js and we'll use the shorthand for vbind so we can reactively receive the new value of premium as it updates now that our product display component is taking in the premium prop we can make use of it within the component so in the template we'll add a new p tag that says shipping and then in an expression we'll say shipping which is the name of a computed property we'll create now that computed property will check if the user is premium if so it will return the string free otherwise it will return 299. checking this out in the browser because premium is true we're showing shipping free awesome it's working to double check we'll change premium to false which now triggers shipping to display 299. and with that that brings us to the end of the lesson into our coding challenge create a new component called product details which receives the details through a prop called details you can check out the ending code at l9-end in this lesson we're going to look at communicating events that happen within our components when we refactor things in our last lesson we broke this behavior now because the cart does not live in our product display component we're not able to add the product to it to understand this problem better let's look at the code if you're coding along you can check out l10-start because the add to cart button lives in the product display component when it's clicked it needs to update the value of cart which lives in the main.js file so how do we get this to happen we already know that props are a way to pass data down into a component but what about when something happens within that component like a button click how do we let other parts of our app know that that event happened the answer is to emit that event telling the parent that it happened so in our product display component instead of adding to this dot cart which doesn't exist on the product display component we can instead say this dollar sign emit and emit an event called add to cart so when the button is clicked we're omitting or bubbling up that event but we need to be listening for that event so we'll add a listener with at add to cart which as you can assume listens for the add to cart event to be omitted and when it hears it it can trigger another method called update cart which lives within main.js as it sounds this method will update the actual cart so let's implement this solution within our app when the button is clicked it triggers the add to cart button which needs to emit the event and we'll switch that out for dollar sign emit add to cart and then we'll listen for that event on product display triggering the update cart method which we'll add within main.js now let's check this out in the browser great it's working we click the add cart button it lets the parent know the event happened triggering the update cart method to make our app more realistic our cart probably shouldn't just be a number it should be an array that has the ids of the product that we pushed into it so let's change things around so we'll set cart as an array and then push id into the cart which means we need to be accepting id within this method which we can have access to when the add to cart event is emitted so here we'll add a second parameter and grab the id much like we're grabbing the image here this id is now the payload of the event that we're emitting so when the update method is triggered it has access to that payload id now in the browser you can see that we're adding the product id into the cart which is now an array but we don't need to actually display these ids so let's change things up a bit in the cart expression here we'll add dot length so that we show how many items are in the cart and that brings us to the end of the lesson into our coding challenge add a new button to product display which removes the product from the cart you can check out the ending code at l10-end in this lesson we're going to learn how to build forms with view by the end of the lesson we'll have a form here where users can add product reviews at the beginning of this course we learned about vbind which creates a one-way binding from the data to the template when working with forms however this one-way binding isn't enough we also need to be binding from the template to the data so that when a user inputs their name into an input for example we record and store that value in our data v-model helps us achieve this creating two-way data binding that way if our data value changes the value in our template also changes because of this two-way binding to see this all in action we're going to create a new form component you can check out the starting code at l11-start inside of the components directory we'll create a new component called review form inside of here we'll say app.component pass in review form as the component name and for this forms component i'm going to paste in this code notice how we're using the es6 string html at the top and inside of our template literal we've got three kinds of inputs a standard input a text area and a select along with a button we'll use to submit the form because we want to bind these form inputs to our data we'll add the data option and add name review and rating now we can use v-model to create a two-way binding between our template and our data so on the name input we'll say v model equals name creating a binding between these two on the review text area we'll say v model equals review and on the rating select we'll say v model dot number equals rating dot number here is a modifier that type casts the value as a number in order to submit this form we'll add a listener up here and say at submit.prevent this is another modifier which prevents the default browser refresh and will trigger the onsubmit method scrolling down here we'll add that method and on submit we'll create a product review object containing name which equals this dot name equaling this dot review and rating which equals this dot rating now that we've created this product review we need to send it up because we don't want the reviews to live on the form we want the reviews to live on the product so we'll say this dot dollar sign admit and emit a review submitted event passing along the product review as the payload and below here we'll clear out and reset this dot name this dot review this dot rating now that our review form is created we can import it within index.html then we'll head into product display and actually use the component nesting it here at the bottom now in the browser we can see the review form and it looks like it's working except when we click that submit button we're emitting the event but we haven't listened for it anywhere so we need to listen for the review submitted event and then add the review to the product display component we'll add the listener here on the review form at review submitted and when the event happens we'll trigger a new add review method it's going to add reviews to our product display component so we'll add a reviews array to the data here then scroll down to the methods and say add review which takes in the review that we got from that event payload and pushes it into the reviews array now that we've implemented the ability to add reviews we need to be displaying those reviews so let's create a new component to do that that component will be called review list it will have a prop so that it can receive the reviews which will be of type array and required and below i'll paste this template we'll add a v4 so that we can print out each review from our reviews array including the index so that we can bind the key attribute to it and then use expressions to create a sentence that says review dot name gave this review dot rating stars in other words adam gave this 5 stars we'll create a break and print out the actual text from that review now we can import this component inside index.html and we'll add it within product display right above the review form adding that reviews prop and passing in the reviews that live on the product display component so to well review we're passing in the reviews into the review list and printing each of them out this out in the browser we'll add a new review click submit and there it is being displayed when there's no reviews to display we don't need to be showing the review list component so let's fix that so here on the review list component we will only show this if reviews have a length in other words if the reviews array is empty we will not show this component with a refresh looks like it's working and when we add a review now it is displaying to finish up this lesson we're going to add some very basic form validation so before we create a product review we're going to check if this dot name is blank or if this dot review is blank or if this dot rating is null if any of these things are the case we will show an alert which says review is incomplete please fill out every field and then return out of the method we'll check this out by trying to submit a review that is not fully filled out and we'll see this alert but of course when we fill out every field we're allowed to add the review congratulations you've made it to the end of our view 3 course and completed your first step on your path to view mastery i invite you to check out our library of other courses that cover all the topics you'll need to succeed as a view developer for your final coding challenge of this course add a question to the form would you recommend this product record and omit the response in the form [Music] you can check out the ending code at [Music] l11-end

Channel: Vue Mastery

Views: 8,697

Rating: 4.9594936 out of 5

Keywords: beginner vue tutorial, intro to vue, javascript, learn vue, learn vue 3, vue 3, vue 3 course, vue 3 crash course, vue 3 project, vue 3 tutorial, vue 3.0, vue js, vue mastery, vue project, vue tutorial, vuejs 3 tutorial, web app

Id: bzlFvd0b65c

Length: 57min 21sec (3441 seconds)

Published: Fri Jul 16 2021