Sometimes, it's necessary to only render HTML when certain conditions are true. Therefore, Vue provides us with the v-if and v-else directives that let us conditionally render elements. Cool. We can use this in our app to show a message if we don't have any shopping list items.
Let's start by commenting out the items in our items array. Then, in our template, we can add a p tag with a v if that only shows when there are no items. Hopping over to our browser, we can see that our empty state message is showing now. And if we add a new item, then it goes away.
Perfect. While this is a great example of conditionally toggling one element, what if we wanted to show two different states? Let's see how to do that by hiding our add item form when we're not using it. Let's start by adding an editing property to our data.
We'll use this to manage when we should be showing or hiding the add item form. We can initialize it to a boolean of faults. Now we can add a VIF to our add item form wrapper. We can set it to show when editing is true.
When we refresh the page now, we can see that our form is no longer there because our conditional is false. If we inspect the elements, we can see now that our form is missing in the DOM. That's because vif actually toggles the existence of that element on the page. If we check out our view dev tools and set editing to true, then we can see that our form reappears.
All right, let's add some buttons to show and hide the form. We can do that by wrapping our h1 in a div. with the class of header. Then we can add two buttons, one of them for cancel and the other for add item.
Now we can make use of the v-else directive. When we use v-if and v-else together, we can dynamically toggle elements based on how our conditional evaluates. In this case, we'll want to show the cancel button when editing is true. Otherwise, we'll want to show the Add Item button.
Now we're ready to add another method that will be responsible for changing the editing data property. We'll start by adding a DoEdit method to our methods object. Then we can pass in an editing parameter and set our editing data property to it. We'll also clear out our new item so we don't persist any half-finished items.
We just need to add that to our buttons using the von directive. For the cancel button, we'll pass in false. For the add item button, we'll of course pass in true. Back in the browser, we can see that clicking the buttons will now toggle our form.
Sometimes, it's necessary to only render HTML when certain conditions are true. Therefore, Vue provides us with the v-if and v-else directives that let us conditionally render elements. Cool. We can use this in our app to show a message if we don't have any shopping list items.
Let's start by commenting out the items in our items array. Then, in our template, we can add a p tag with a v if that only shows when there are no items. Hopping over to our browser, we can see that our empty state message is showing now. And if we add a new item, then it goes away.
Perfect. While this is a great example of conditionally toggling one element, what if we wanted to show two different states? Let's see how to do that by hiding our add item form when we're not using it. Let's start by adding an editing property to our data.
We'll use this to manage when we should be showing or hiding the add item form. We can initialize it to a boolean of faults. Now we can add a VIF to our add item form wrapper. We can set it to show when editing is true.
When we refresh the page now, we can see that our form is no longer there because our conditional is false. If we inspect the elements, we can see now that our form is missing in the DOM. That's because vif actually toggles the existence of that element on the page. If we check out our view dev tools and set editing to true, then we can see that our form reappears.
All right, let's add some buttons to show and hide the form. We can do that by wrapping our h1 in a div. with the class of header. Then we can add two buttons, one of them for cancel and the other for add item.
Now we can make use of the v-else directive. When we use v-if and v-else together, we can dynamically toggle elements based on how our conditional evaluates. In this case, we'll want to show the cancel button when editing is true. Otherwise, we'll want to show the Add Item button.
Now we're ready to add another method that will be responsible for changing the editing data property. We'll start by adding a DoEdit method to our methods object. Then we can pass in an editing parameter and set our editing data property to it. We'll also clear out our new item so we don't persist any half-finished items.
We just need to add that to our buttons using the von directive. For the cancel button, we'll pass in false. For the add item button, we'll of course pass in true. Back in the browser, we can see that clicking the buttons will now toggle our form.