Vue 'computed' Option
Example
Using a computed property inside the computed 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
The computed 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 a get and a set 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 the this keyword.
Related Pages
Vue Tutorial: Vue Computed Properties
Vue Tutorial: Vue v-on Directive
