Vue JS props is underfined

Question

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:

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

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.

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>

wangdev87 · Accepted Answer · 2020-10-29T17:14:26.850

3

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

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

edited Oct 29 '20 at 17:14

answered Oct 29 '20 at 15:56

wangdev87

8,611
3
8
31

Thanks William - I figured that was the issue already and the issue is present with props being set to true (I should have included that in my original question - sorry) - I have updated my question showing this being added – Wally Oct 29 '20 at 16:10
added the code - with a summary - cannot add a full snippet as this is using the gridsome framework – Wally Oct 29 '20 at 16:25
value you are sending is object, can you try to convert it to string by JSON.stringify() ? – wangdev87 Oct 29 '20 at 16:38
I did try previously to pass anything in as a prop (string included) just to test if a prop could be passed and this did not work - I have make a json string from the object and this did not pass either and is still left as undefined – Wally Oct 29 '20 at 16:41
1

can you just try to console.log(this.$route.params) in the redirection route page? – wangdev87 Oct 29 '20 at 16:50
1

try to pass `name` rather than `path` for router.push `this.$router.push({name: `${value.sectionLink}`, params: {pageOBJ: value}})` – wangdev87 Oct 29 '20 at 16:52
Pushing name router worked! thanks for your help - very odd as initially name was not being found. If you want to edit your answer then this will be correct :) – Wally Oct 29 '20 at 16:56

Boussadjra Brahim · Answer 2 · 2020-10-29T16:20:50.513

1

You should add props:true to the route definition :

{
 path:'/thepath/:theParam',
 component:SomeComponent,
 props:true
}

edited Oct 29 '20 at 16:20

answered Oct 29 '20 at 15:57

Boussadjra Brahim

82,684
19
144
164

Vue JS props is underfined

2 Answers2