I have an issue where a computed property only sometimes works. Sometimes it has the value/error templateComponent:"(error during evaluation)"
What could be causing this issue? If someone can point me in the correct direction I can investigate further but I dont know where to start.
The problem computed property:
// Error in the below computed property
templateComponent() {
let template = 'default' // assign default template
if (!_.isNull(this.wp.template) && this.wp.template.length)
template = this.wp.template.replace('.php','').toLowerCase()
return template
}
Page.vue
<template>
<div v-if="wp">
<component :is="templateComponent" v-bind:wp="wp"></component>
</div>
<p v-else>Loading...</p>
</template>
<script type="text/javascript">
import { mapGetters } from 'vuex'
import * as Templates from './templates'
// Map template components
let templateCmps = {}
_.each(Templates, cmp => {
templateCmps[cmp.name] = cmp
})
export default {
props: ["slug"],
components: {
...templateCmps
// Example of templateCmps is below
// 'default': Templates.Default,
// 'agency': Templates.Agency,
// 'home': Templates.Home,
},
computed: {
...mapGetters(['pageBySlug']),
wp() {
return this.pageBySlug(this.slug);
},
// Error in the below computed property
templateComponent() {
let template = 'default' // assign default template
if (!_.isNull(this.wp.template) && this.wp.template.length)
template = this.wp.template.replace('.php','').toLowerCase()
return template
}
},
created() {
// Get page title, content, etc. via rest request
this.$store.dispatch('getPageBySlug', { slug: this.slug })
}
}
</script>
No, you can't pass parameters to computed properties.
Computed Caching vs Methods For the end result, the two approaches are indeed exactly the same. However, the difference is that computed properties are cached based on their reactive dependencies. A computed property will only re-evaluate when some of its reactive dependencies have changed.
A Computed Property provides a getter and an optional setter to indirectly access other properties and values. It can be used in several ways. The filename property is read-only which means that the following code would not work: Computed Properties are readonly and setters wont work.
Getters and setters in Swift are the methods a computed property uses to either set or get a value on-demand. A stored property stores a value for later use (for example, a variable that belongs to a class instance). A computed property does not store a value. Instead, it computes it only when requested.
The problem might relate to this.wp.template
. Are you certain that it is always a string upon which lowerCase can be called? If the computed property would return something else than a string, it could cause the problem.
Also, Vue has problems handling dashes before numbers.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With