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 调用返回以导致结果面板显示后，在父组件中。在设置之前，当 analysisData 为 [] 时，它希望隐藏整个 ResultsPanel 组件。我怎样才能做到这一点？

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

标签： javascriptvue.jsvue-component

Answer 1

使用这样的道具：

父组件：

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