Within my parent component, I have the following structure:
<v-container fluid>
<ResultsPanel ref="results" />
</v-container>
The ResultsPanel component consists of:
<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>
I intend to utilize the following code:
this.$ref.resultsTable.analysisData = [some, returned, data,]
in the parent component post an axios call returning in order to display the ResultsPanel. If analysisData is [], I want the entire ResultsPanel component to remain hidden until it is set. How can I achieve this?
Currently, the component displays regardless of whether or not data is present. Attempting to move the v-if directive to the v-container results in no display even after adding data to the component.