Показывать дочерний компонент только после загрузки данных - PullRequest
Новая
       29

Показывать дочерний компонент только после загрузки данных

0 голосов
/ 30 апреля 2020

В моем родительском компоненте у меня есть: 

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

ResultsPanels: 

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

в родительском компоненте после возвращается вызов ax ios, вызывающий отображение ResultsPanel. Прежде чем это установить, когда analysisData имеет значение [], он хочет, чтобы весь компонент ResultsPanel был скрыт. Как я могу выполнить sh this?

В настоящее время компонент отображается независимо от наличия данных. Если я переместлю v-if в v-контейнер, он никогда не отобразится даже после добавления данных в компонент.

1 Ответ

1 голос
/ 01 мая 2020

Используйте реквизиты так:

родительский компонент: 

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