vue.jsgridsome

Vue JS props is underfined

Im using Gridsome frame work for VUE JS

I am navigating to a new page by using this.$router.push(PATH, PARAMS)

this.$router.push({path: `/${value.sectionLink}/`, params: {pageOBJ: value}})

The page route works fine - however the PROP, pageOBJ is undefined in the page as seen in the VUE inspector:

enter image description here

it should be an object (which is what VALUE is set to) i.e.

backgroundColor: (...) sectionLink: (...) sectionSubTitle: (...) sectionTitle: (...) titleColor: (...)

I've tried a number of different techniques to resolve this but have not managed to figure this out so I assume I have missed something here?

Is this the issue?

Gridsome also references graphQI, are you supposed to grab the data using graph and not by pushing Props?

Any help would be amazing here - please let me know if you need any further information.

Thanks - W

UPDATE BASED ON CURRENT ANSWERS:

I have already added props:true to the component as shown below, but the issue is still present.

enter image description here

CODE SNIPPET - SUMMARY:

User clicks on the SectionTitle component, this then emits the page link (each of the SectionTitle is a object from : sections array of Object)

To see the current online version of this please look at

wtwd.ninjashotgunbear.com

<template>
  <Layout>
    <div class="navs" v-for="section in sections" :key="section.sectionTitle">
      <!-- On click delay for screen to come ove top -->
      <!-- router to be put here -->
      <SectionTitle :data="section" @routeChange="reRoute($event)"/>
    </div>
    
    <PageTransition :dataObj="transitionObj"/>
    
  </Layout>
</template>

<script>

import SectionTitle from '@/components/SectionTitle.vue';
import PageTransition from '@/components/PageTransition.vue'

export default {
  metaInfo: {
    title: 'Hello, world!'
  },
  components: {
    SectionTitle,
    PageTransition
  },
  data(){
    return {
      // data to be passed to the components

      sections: [
        {
          sectionTitle: 'Clients',
          sectionLink: 'clients',
          sectionSubTitle: '"Some of the amazing humans I have had the pleasure of working with"',
          backgroundColor: '#F08080',
          titleColor: '#E65454'
        }, 
        {
          sectionTitle: 'Projects',
          sectionLink: 'projects',
          sectionSubTitle: '"I LIKE TO MAKE PROJECTS THAT WILL TEST MY KNOWEDGE AND EXPOSE MY WEAKNESSES"',
          backgroundColor: '#20B2AA',
          titleColor: '#11DACF'
        }, 
        {
          sectionTitle: 'Skills',
          sectionLink: 'skills',
          sectionSubTitle: `"LEARNING WILL NEVER END, SO LONG AS YOUR AMBITIONS ARE STOKED, AND I've got plenty of ambition"`,
          backgroundColor: '#A921B2',
          titleColor: '#CA14D6'
        },
        {
          sectionTitle: 'About Me',
          sectionLink: 'aboutme',
          sectionSubTitle: `"My joruney becoming a developer so far"`,
          backgroundColor: '#FFFFFF',
          titleColor: '#D1D1D1'
        },
        {
          sectionTitle: 'Contact Me',
          sectionLink: 'contactme',
          sectionSubTitle: `"If you have any questions or want to reach out about a project then i'd love to speak with you"`,
          backgroundColor: '#2185B2',
          titleColor: '#0076AB'
        }
      ],
  
      divText: null,

      transitionObj: null
  
  }

  },
  methods:{
    reRoute(value){
      
      // 1)A) - change the text of the div to say the section it is being moved to
      this.divText = value.sectionTitle
      this.transitionObj = value
    
     // FIND center pixcle value to place text - scrolled height + windowHeight / 2 = centerPos
      let centerPos = window.scrollY+(window.innerHeight/2)

      // Apply secific Title color - and center possitioning
      document.querySelector('.leaveScreen p').style.cssText=`color: ${value.titleColor}; top: ${centerPos}px`


      // 1) animate the loading screen
        let screen = document.querySelector('.leaveScreen');
        screen.style.cssText=`background: ${value.backgroundColor}; left: 0%`;

      // 2) re-route the page
      setTimeout(()=>{
        this.$router.push({path: `/${value.sectionLink}/`, params: {pageOBJ: value}}) // << says that the route name is not found
        // this.$router.push(value.sectionLink)
      }, 700)

    }
  }
}
  
</script>

<style lang="scss"> 
//  **** ERROR CAUSED BY NOT INSTALLING SCSS package ****
// https://gridsome.org/docs/assets-css/ &&&& npm install -D sass-loader node-sass

// Universal Font being used - LEMON MILK
@font-face {
  font-family: LemonMilk;
  src: url('../assets/fonts/LemonMilk.otf');
}

* {
  box-sizing: border-box;
}

.navs {
    font-family: LemonMilk;
}

.SectionTitle{
  cursor: pointer;
}

</style>

Solution

  • Pass name rather than path in this.$router.push()

    this.$router.push({name: ${value.sectionLink}, params: {pageOBJ: value}})