Vue Highcharts display graph for each user after routing

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;