javascript - 仅在数据加载后显示子组件

Question

在我的父组件中，我有:

<v-container fluid>
  <ResultsPanel ref="results" />
</v-container>

结果面板是:

<template v-if="showResults">
   <v-container > IM SHOWIN!</v-container>
</template>

<script>
export default {
   name: "ResultsPanel",
   data: () => ({
       fiData: [],
       analysisData: [],
   }),
   computed: {
       showResults() {
           return (this.analysisData && this.analysisData.length > 0)
       }
   }
 }
 </script>

我想使用:

this.$ref.resultsTable.analysisData = [some, returned, data,] 

在 axios 调用返回后在父组件中显示 ResultsPanel。在设置之前，当analysisData为[]时，它希望隐藏整个ResultsPanel组件。我怎样才能做到这一点？

目前，无论数据是否存在，该组件都会显示。如果我将 v-if 移动到 v-container，即使将数据添加到组件中，它也永远不会显示。

Answer 1

使用这样的 Prop :

父组件:

<v-container fluid>
  <ResultsPanel ref="results" :analysisData="analysisData" v-if="showResults"/>
</v-container>
...
data: () => ({
       analysisData: []
   }),
 computed: {
     showResults() {
         return (this.analysisData && this.analysisData.length > 0)
     }
 }
...
methods: {
  setData () {
    this.analysisData = [some, returned, data,] 
  }
}

子组件:

<template>
   <v-container > IM SHOWIN!</v-container>
</template>

<script>
export default {
   name: "ResultsPanel",
   props: {
        analysisData: {
           type: Array,
           default: () => []
        },
   data: () => ({
       fiData: [],
   })
 }
 </script>```