he 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>y componente gráfico
<graph-component :key="graphKey" v-bind="measurement" :value="valueOfMeasurement(measurement)" :time_date="dateOfMeasurement()" ></graph-component> La función getValuesFromDate($event) llama a la 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) {} } Cuando cambio la selección (y llamo a esta función), vuelvo a renderizar graph-component cambiando la clave, y funciona bien. ¿Cuál es la forma mejor y más correcta de hacer esto o esta es lo suficientemente buena?
@Lube, esta es la mejor manera de forzar una nueva representación de un componente. Necesitaba hacer lo mismo con los componentes de gráficos en el pasado cuando cambiaban mis datos.
Hay un excelente artículo al que he vinculado a continuación que explica las diversas formas de forzar una nueva representación, pero en última instancia, la mejor manera es agregar una propiedad :key a su componente y actualizar esa clave cada vez que necesite una nueva representación.
El artículo se puede encontrar aquí .