Is there a way to transfer a selected key to another template for displaying a chart? I've developed a template that exports a multi-line chart, utilizing Axios to retrieve data from an API.
In the home page, there's a dropdown menu. When a user selects an item, the chosen item or its value should be passed to the chart template so that it can return a chart for that selected item.
// Home component
<template>
<section>
<label>City</label>
<select @change="getArea()" v-model="key" class="custSelect2">
<option :value="0">Select City</option>
<option v-for="data in cityList" :value="data.id">{{ data.city }}</option>
</select>
<label>Area</label>
<select @change="getWard()" v-model="keyArea" class="custSelect2">
<option :value="0">Select Area</option>
<option v-for="data in areaList" :value="data.id">{{ data.area}}</option>
</select>
<label>Ward</label>
<select v-model="Polekey" @change="getPole()" class="custSelect2">
<option :value="0">Select Ward</option>
<option v-for="data in wardList" :value="data.id">{{ data.ward}}</option>
</select>
<label>Pole</label>
<select v-model="PoleSelected" class="custSelect2">
<option :value="0">Select Pole</option>
<option v-for="data in PoleList" :value="data.poleid">{{ data.poleid}}</option>
</select>
<div>
<Areachart />
</div>
</section>
</template>
// Area component
<script>
import { Line } from "vue-chartjs";
export default {
extends: Line,
data() {
return {
dataList: []
};
},
mounted() {
var self = this;
axios
.get("http://172.31.0.114:5008/api/city/data" + this.key) // key is the value that user selected
.then(function(res) {
self.dataList = res.data;
// how to initilize data into below datasets
})
.catch(function(error) {
console.log("Error:", error);
});
this.renderChart(
{
labels: [],
datasets: [
{
label: "Data One",
borderColor: "#FC2525",
backgroundColor: this.gradient,
data: []
},
{
label: "Data Two",
borderColor: "#05CBE1",
data: []
}
]
},
{ responsive: true, maintainAspectRatio: false }
);
}
};
</script>