CODEWITHSUNDEEP
vue.jsnuxt.jsvuejs3vue-composition-api
oktay tontaş
oktay tontaş

Reputation: 271

How to use Computed Property in Nuxt js Layout Pages? (Composition Api)

I need to use computed property in my Category Layout page. When pages which are under this layout changed, computed must understand page changings. But I can't catch these changes and I can only catch changes if I use them in Watch property.

Layout.vue

v-app
  v-main 
    nuxt
    speed-dial-button(:page="page")
....

setup() {

    const route = useRoute();
    const page = ref('');
    const currentPath = computed(()=>route.value.path);


    if (['/eserler', '/en/artworks', '/ar/artworks'].includes(currentPath)) {
      page.value = i18n.t('general.addNewArtwork');
    } else if (['/kisiler', '/en/persons', '/ar/persons'].includes(currentPath)) {
      page.value = i18n.t('general.addNewPerson');
    } else if (['/etkinlikler', '/en/activities', '/ar/activities'].includes(currentPath)) {
      page.value = i18n.t('general.addNewActivity');
    }

console.log('page',page)
console.log('route',routePath)

  return { 
      page,
    };

  }

This will work if I load page first time or if I leave layout and return again .

Upvotes: 0

Views: 5274

Answers (1)

Steven Spungin
Steven Spungin

Reputation: 29139

Your template will react, but not your log statement. Put that in a watcher. Set deep and immediate to your needs.

watch(route, value => {
  // your code here
  console.log(value.path)
}, {deep: true, immediate: true})

Upvotes: 2

Related Questions