Vue 'computed' Option
Example
Using a computed property inside thecomputed option to show the appropriate button text.
export default { data() { return { msg: 'Hello World!', showMsg: false }; }, computed: { btnText() { if( this.showMsg ) { return 'Hide' } else { return 'Show' } } }};Definition and Usage
Thecomputed option is an object with all the computed properties that are declared on the Vue instance.
Computed properties are usually read-only (see the example above), but it is possible to define a computed property as an object with both aget and aset function, which means that the computed property can also be written to.
Note:Arrow functions should be avoided when declaring computed properties because the Vue instance cannot be reached from inside such a function using thethis keyword.
Related Pages
Vue Tutorial:Vue Computed Properties
Vue Tutorial:Vue v-on Directive
