I have select:
<select @change="getValuesFromDate($event)">
<option value="1">Last 24 hours</option>
<option value="7">Last7 days</option>
<option value="30">Last 30 days</option>
<option>Custom date</option>
</select>
and chart component
<graph-component
:key="graphKey"
v-bind="measurement"
:value="valueOfMeasurement(measurement)"
:time_date="dateOfMeasurement()"
></graph-component>
Function getValuesFromDate($event) calls API:
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) {}
}
When I change select (and call this function) I re-render graph-component by changing it key, and it works just fine.
What is better and more correct way to do this or this one is fine enough?
@Lube this is the best way to force a re-render of a component. I've needed to do the same for graph components in the past when my data changes.
There's a great article I've linked to below that explains the various ways of forcing a re-render, but ultimately the best way is adding a :key property to your component and updating that key whenever you need a re-render.
Article can be found here.