Recently, I encountered the following scenario with a select element:
<select @change="getValuesFromDate($event)">
<option value="1">Last 24 hours</option>
<option value="7">Last 7 days</option>
<option value="30">Last 30 days</option>
<option>Custom date</option>
</select>
Additionally, there is a chart component in play:
<graph-component
:key="graphKey"
v-bind="measurement"
:value="valueOfMeasurement(measurement)"
:time_date="dateOfMeasurement()"
></graph-component>
The function getValuesFromDate($event) triggers an API call:
getValuesFromDate(event) {
let apiLink ="https://api.thingspeak.com/channels/1111111/feeds.json?api_key=XXXXXXXXXXXX&days=" +event.target.value +"&round=2&average=";
let preferableSize = 0;
if (event.target.value == 1) {
preferableSize = 60;
} else {
preferableSize = 1440;
}
try {
axios
.get(apiLink + preferableSize, {
withCredentials: false
})
.then(response => {
this.message = response.data;
});
this.graphKey+= 1;
} catch (error) {}
}
Upon changing the select option and calling this function, the graph-component is re-rendered by modifying its key. This method seems to be working effectively.
Would you suggest any alternative approach that might be considered more efficient and correct than the current one?