Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

'error during evaluation' for computed property

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>
like image 614
sazr Avatar asked Apr 25 '18 07:04

sazr


People also ask

Can we pass parameters to computed property?

No, you can't pass parameters to computed properties.

Are computed properties cached?

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.

What is the computed property?

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.

Can we use setters and getters in computed properties?

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.


1 Answers

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.

like image 124
Dan Avatar answered Oct 23 '22 13:10

Dan