子組件中未定義的道具

Question

我有一個包含三個子組件的父組件。 第一個子組件是一個表單。 在提交事件上，它使用 props 通過父組件將數據傳遞給第二個和第三個子組件。 但是，在其中一個子組件中，道具始終未定義。 我認為這是一個時間問題，但使用 v-if 似乎並不能解決問題。

父組件：

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

道具正常工作的子組件（PatentSearchResults）：

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

以及未定義道具的子組件：

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

在定義專利查詢之前安裝詞雲組件是否是時間問題？ 如果是這樣，為什么 v-if 不延遲組件，因為在定義專利查詢之后，搜索是錯誤的。

Answer 1

這是一個時間問題，我可以使用以下代碼訪問專利查詢：

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