computed properties vue code example
Example 1: cannot access this from computed vuejs
computed:{
$currency(){
return this.$store.state.currency
}
},
Example 2: vue computed
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
Example 3: computed vue js
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
Example 4: computed vue typescript
<template>
<div>
<input type="text" name="Test Value" id="" v-model="text">
<label>{{label}}</label>
</div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
@Component({})
export default class About extends Vue {
private text = "test";
get label() {
return this.text;
}
}
</script>
<script lang="ts">
import { defineComponent, ref, computed } from "@vue/composition-api";
export default defineComponent({
setup() {
const text = ref("test");
const label = computed(() => {
return text.value;
});
return {
text,
label
};
}
});
</script>
Example 5: vue add watcher
vm.$watch('person.name.firstName', function(newValue, oldValue) {
alert('First name changed from ' + oldValue + ' to ' + newValue + '!');
});