There are recurring calls to a component from different views, like the example below:
<highcharts
:options="getSomeData"
:constructor-type="'mapChart'"
:callback="getSomeDataCallback"
class="someFancyStyle"
/>
To streamline this process within a more general block that loads data and handles errors, a new component called "GraphDisplay" has been created:
<template>
<div>
<div v-if="loading"> loading... </div>
<div v-else-if="error"> error... </div>
<div v-else>
<div v-if="highcharts">
<highcharts
:options="data"
/>
</div>
<div v-else>
<slot></slot>
</div>
</div>
</div>
</template>
<script>
export default {
name: "GraphDisplay",
props: {
loading: Object,
error: Object,
data: Object,
highcharts: Boolean,
},
};
</script>
Now, calling GraphDisplay is as simple as:
<GraphDisplay
:loading="bla.isLoading"
:error="bla.errors"
:data="bla.data"
highcharts
/>
or
<GraphDisplay
:loading="bla.isLoading"
:error="bla.errors"
>
<another graph>
</GraphDisplay>
This approach works effectively.
The challenge arises when <highcharts> sometimes requires additional props, such as the ones mentioned in the initial code snippet. Is there a way to pass optional props when calling the component? One attempt was to introduce a new prop "config" with possible values:
props: {
loading: Object,
error: Object,
data: Object,
highcharts: Boolean,
config: {
type: Object,
default: () => {}
},
},
Which results in the following call structure:
<GraphDisplay
:loading="getSomeData.isLoading"
:error="getSomeData.errors"
:data="getSomeData.data"
:config="{
constructorType: 'mapChart',
class: 'someFancyStyle'
}"
/>
The component utilizes these optional props like so:
<highcharts
:options="data"
:constructor-type="config.constructorType"
:class="config.class"
>
This approach may seem overly complex, leading to uncertainty on whether it's the right path to take. The ideal scenario would be to have a set of optional props that are only delivered to <highcharts> if provided. Perhaps utilizing the Spread syntax could simplify this process:
<div v-if="highcharts">
<highcharts
:options="data"
...config // including additional data here
/>
</div>