The Javascript framework Vue.js, Part 6 Data Monitoring with Computed Properties and Watchers
If you want to automatically change data within your Vue components or trigger other actions, you can use computed properties and Watcher for this. Here we show how these two functions can be used.
In software development, it is customary to store data as normalized as possible and not multiple times. To store the data of a customer, attributes such as title, first and last name are therefore provided, but no further field for the compound name. The complete name in the form Mr. Max Mustermann can finally be composed of the components at any time.
In order not to have to do this in several places and in a consistent way, so-called “computed properties” can be used in Vue. In the Options object, they are placed behind the key computed listed below. The following piece of code shows an example of such a calculated property named DisplayNamewhich implements the described problem:
