Vue Highcharts display graph for each user after routing - highcharts

Question

I'm using Vue cli and Highcharts. I have a user profile which displays some info about a user like so:
<div class="top" v-for="(item, index) in arrays" :key="item.id" v-bind:id="item.name">
<div> <p class="p"> {{ item.name }}</p> </div>
<div class="box" #click="route()">Rate</div>
which is displaying data from an array in vuex:
export default new Vuex.Store({
state: {
arrays: [
{
name: 'Bethany',
rate: [60, 75, 70, 85, 65],
Temp: [35, 37, 38, 26],
},
{
name: 'Sam',
rate: [70, 95, 60, 65, 83],
Temp: [36, 35.8, 37, 36]
},
]
I'm using Highcharts to display the rate and Temp and am routing to the charts with the route function.
route: function () {
this.$router.replace({ name: "Charts" });
},
My chart looks like this:
this.target = Highcharts.stockChart(this.$el, {
Chart: {
renderTo: 'container'
},
xAxis: [{
format: '{value}',
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
}],
yAxis: [{
labels: {
format: '{value}',
},
}],
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
},
series: [ {
name: 'Rate',
type: 'spline',
data: this.rate,
}],
});
},
Right now I have it just displaying data like so:
data : function() {
return {
target: undefined,
rate: this.$store.state.arrays[0]['rate'],
}
},
But I need a way to do it for all rates in array.
I'm looking for a way to display the series data for each users rate. So when I click on Bethany rate box I'm routed to the charts page with series data displaying the rates for Bethany.
Thanks!

Answer 1

You could add the current person name as a query parameter to your route:
route: function () {
const name = "Bethany"; // TODO: use actual person name...
this.$router.replace({ name: "Charts", query: { person: name } });
},
Then change:
this.$store.state.arrays[0]['rate'];
to something like:
this.$store.state.arrays.find(x => x.name === this.$route.query.person).rate;