How to display the value of a variable

Viewed 49

Gets data from collection:

const pageTitles = {
    homePage: 'Main'
...
  }
export default pageTitles

If I make all this way:

<div><span>{{pageTitles.homePage}}</span></div>

everything is ok. But i need to show the value depending on route. I tried to make this:

pageTitle(){
      if (this.$route.path === '/'){        
        return pageTitles.homePage
      }
    }

and in div I have {{pageTitle}}, but it doesn't work. Why it doesn't work?

2 Answers

you've omitted the this keyword before pageTitles.homePage in your computed property

pageTitle(){
      if (this.$route.path === '/'){        
        return this.pageTitles.homePage
      }
    }

It should work, Here you go :

new Vue({
  el: '#app',
  data: {
    pageTitles: {
        homePage: 'Main'
    }
  },
  computed: {
    pageTitle() {
        return this.pageTitles.homePage
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>{{ pageTitle }}</h2>
</div>

Related