Search code examples
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?

  • gridsome auto generates the page routes when you add a new PAGE.VUE file to the /pages folder -

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}})