Undefined prop in child component

Question

I have a parent component containing three child components. The first child component is a form. On a submit event it passes data to both the second and third child components via the parent component using props. However in one of the child components, the prop is always undefined. I think it's a timing issue, but using v-if does not seem to solve the issue.

The Parent Component:

<template>
    <div>
        <patents-searchform v-on:form-submit="processForm"></patents-searchform>
        <patents-word-cloud
          v-if="searched"
          v-show="searched"
          :patentsQuery="patentsQuery"
          :livePage="livePage"
          v-on:pageChange="handlePageChange"
        />
        <patents-search-results
          v-if="searched"
          v-show="searched"
          ref="resultsRef"
          :livePage="livePage"
          :results="patentsQueryResult"
          v-on:pageChange="handlePageChange"
    </div>
</template>


export default {
    data() {
        return {
            livePage: 1,
            searched: false,
            queryform: 'initVal',
            patentsQueryResult: {},
            searching: false,
            patentsQuery: {}
        };
    },
    components: {
        'patents-searchform': PatentsSearchForm,
        'patents-searchresults': PatentsSearchResults,
        'patents-word-cloud': PatentsWordCloud,
    },
    methods: {
        handlePageChange(value) {
            console.log('Homepage::handlePageChange', value)
            this.queryform.page = value;
            this.livePage = value;
            this.fetchData();
        },
        processForm(formData) {
            this.queryform = formData;
            this.fetchData();
            this.patentsQuery['query'] = this.queryform['query']
            this.patentsQuery['searchMode'] = this.queryform['searchMode']
            this.searched = true;
        },
        fetchData() {
            const path = '/flask/searchPatentsNEW';
            this.searching = true;
            if (this.queryform !== 'initVal') {
                axios.post(path, this.queryform)
                    .then((res) => {
                        this.patentsQueryResult = res.data;
                        this.searching = false;
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            }
        }
    }
};

The child component (PatentSearchResults) in which the props work correctly:

<template>
  <b-container>
    <b-card>
          <a id="sTitleCard">Search Results</a>
          <div id="quickStats" style="margin-left: 5%" v-if="this.results.stats">
            {{results.stats.totalAuthors}} inventors across {{results.stats.docCount}} patents
            ({{results.stats.totalQueryTime}} seconds)
          </div>
    </b-card>
  </b-container>
</template>

<script>

export default {
  name: 'Results',
  props: ['results', 'livePage'],
  computed: {
    thisAuthorPage() {
      if (this.results.authors !== null) {
        return this.results.authors; //this.results works fine
      }
      console.log('no authors')
      return [];
    },
  },
  methods: {
  },  
};
</script>

And the child component where the props are undefined:

<template>
    <div>
    <b-card id="patentWordCloudCard" bg-variant="light">
        <b-container>
            <b-form id="queryForm" @submit="onSubmit" @reset="onReset" novalidate>
                <b-row class="d-flex flex-row-reverse">
                <b-button id="btnSubmit" type="submit" variant="primary">Generate query word cloud</b-button>
                </b-row>
            </b-form>
        </b-container>
    </b-card>
    
    </div>
    
</template>

<script>


export default {
    name: 'Patents Word Cloud',
    props: ['patentsQuery'],
    data() {
        return{
            form: {
                query: this.patentsQuery.query,
                searchMode: this.patentsQuery.searchMode
            },
            show: true,
        }
    },
    mounted() {
        console.log(this.patentsQuery) //undefined
    },
    computed() {
        console.log(this.patentsQuery) //undefined
    },
    methods: {
        onSubmit(evt) {
            evt.preventDefault();
            console.log(this.patentsQuery) //undefined
        }
    }
    
}
</script>

Is it a timing issue where the word cloud component is mounted before patentsQuery is defined? If so, why did v-if not delay the component, as searched is false until after patentsQuery is defined.

Answer 1

It was a timing issue, I was able to access patentsQuery with the following code:

<template>
    <div>
    <b-card id="patentWordCloudCard" bg-variant="light">
        <b-container>
            <b-form id="queryForm" align-h="center" @submit="onSubmit" @reset="onReset" novalidate>
                <b-row align-h="center">
                    <b-button align-h="center" id="btnSubmit" type="submit" variant="primary">Generate query word cloud</b-button>
                </b-row>
            </b-form>
            
        </b-container>
    </b-card>
    
    </div>
    
</template>

<script>

import axios from 'axios';


export default {
    name: 'Patents Word Cloud',
    props: ['patentsQuery'],
    methods: {
        onSubmit(evt) {
            evt.preventDefault();
            const path = 'flask/patentWordCloud';
            this.searching = true
            axios.post(path, this.patentsQuery).then((res) => {
                    console.log('Patent Word Cloud Data')
                    console.log(res.data)
                    this.patentResults = res.data;   
                })
                .catch((error) => {
                    console.log(error)
                })
            
        }
    }
    
}
</script>