Vue offers another powerful feature called computed properties that lets us perform transformations or calculations on our data. This might sound a little abstract, but we could, for instance, create a computed property that would calculate the length of the text in an input. For example, if we wanted to enforce a character limit on our new item field, and wanted to show our users how many characters they had left, then we could use a computed property to calculate that for us based on our current data implementation. As we type our new item, we can see our character count in real time.
While this example is a little basic, Computed properties are extremely powerful tools for encapsulating data transformations and manipulations that stay synced with the data that they reference. So, let's try using a computed property to flip our items so that the newest item shows up at the top of our list. We can get rid of all that example code and add a reversed items property to our computed object. Right now.
This is looking an awful lot like our methods object, but don't worry, there's a big difference in how they work. Inside of reversed items, we need to return a reversed array of items. It's very important to actually return a value from a computed property. Otherwise, Vue won't know what the value should be.
reverse method, but We'll need to be careful not to change our actual items array. Remember that computed properties are only for transforming data for our presentation layer. They should not alter or change the existing data. To avoid that, we can use the spread operator to make a clone or copy of the array.
Accidentally changing or mutating an underlying data value in a computed property is a big source of headaches and bugs, so be sure to keep that in mind when you're working with them. With our computed property ready, let's see how it looks in our View DevTools. We can see that there's a new section for computed properties now. Just like we planned, it looks like our reversed items are a reversed copy of our items.
If we add another item, we can see that it automatically gets added to our reversed items, even though we haven't written any code to do that. This is thanks to Vue's reactivity and a computed property's ability to re-render itself when the data that it's transforming changes. To use this in our template, we'll simply replace the items in our V4 with reversed items. Sometimes, it can be tricky to decide when to use a computed property and when to use a method.
When you need to change data, you will use methods. When you need to change the presentation of existing data, you'll use computed properties. As you practice both concepts, understanding when to use each will become much easier. Now, when we look at our shopping list, we can see the newest items are on top.
Vue offers another powerful feature called computed properties that lets us perform transformations or calculations on our data. This might sound a little abstract, but we could, for instance, create a computed property that would calculate the length of the text in an input. For example, if we wanted to enforce a character limit on our new item field, and wanted to show our users how many characters they had left, then we could use a computed property to calculate that for us based on our current data implementation. As we type our new item, we can see our character count in real time.
While this example is a little basic, Computed properties are extremely powerful tools for encapsulating data transformations and manipulations that stay synced with the data that they reference. So, let's try using a computed property to flip our items so that the newest item shows up at the top of our list. We can get rid of all that example code and add a reversed items property to our computed object. Right now.
This is looking an awful lot like our methods object, but don't worry, there's a big difference in how they work. Inside of reversed items, we need to return a reversed array of items. It's very important to actually return a value from a computed property. Otherwise, Vue won't know what the value should be.
reverse method, but We'll need to be careful not to change our actual items array. Remember that computed properties are only for transforming data for our presentation layer. They should not alter or change the existing data. To avoid that, we can use the spread operator to make a clone or copy of the array.
Accidentally changing or mutating an underlying data value in a computed property is a big source of headaches and bugs, so be sure to keep that in mind when you're working with them. With our computed property ready, let's see how it looks in our View DevTools. We can see that there's a new section for computed properties now. Just like we planned, it looks like our reversed items are a reversed copy of our items.
If we add another item, we can see that it automatically gets added to our reversed items, even though we haven't written any code to do that. This is thanks to Vue's reactivity and a computed property's ability to re-render itself when the data that it's transforming changes. To use this in our template, we'll simply replace the items in our V4 with reversed items. Sometimes, it can be tricky to decide when to use a computed property and when to use a method.
When you need to change data, you will use methods. When you need to change the presentation of existing data, you'll use computed properties. As you practice both concepts, understanding when to use each will become much easier. Now, when we look at our shopping list, we can see the newest items are on top.