Vuetify create variable from selection

Question

I have a dropdown list in vuetify from which I want to save the selected options as variables. The reason why I want to save the options as variables is because later I'll use them to populate a highcharts graph. So for example, if the first two cities are selected, I want two variables to be saved. If only one, then only one is saved. I've been trying to read how to do this but without any success. I know I can use {{selected}} to display what's selected but not how to save that.

EDIT:

The example below shows two components. The first one is the component where the selection is made and the graphs are populated. The second one has the graph that is going to be used.

As it was pointed out by another user, there are several ways of doing it. Ideally I would prefer the users to have to select 1 city, press a button and the graph would be generated.

<template>
<v-container fluid text-xs-center style="height: 90vh; max-height: 100%; background-color: #F5F5F5">
     <v-layout row wrap>
      <v-flex xs4>
          <v-card flat color='#F5F5F5'>
          <Rose v-bind:options="charttest"/>
      </v-card>
      </v-flex>

      <v-flex xs12 sm6>
        <v-select
          v-model="selected"
          :items="items"
          item-text= "city"
          item-value="value"
          :menu-props="{ maxHeight: '400'}"
          label="Select"
          hint="Pick your favorite states"
          multiple
          persistent-hint
          return-object
          single-line
        ></v-select>
      </v-flex>

      </v-layout>
  </v-container>
</template>

<script>
import Rose from "@/components/Rose";

var originaldata = [
              {
                data:[10],
                type: 'column',
                color: "#AEA8A8",
                name: "TESTMARK",
                pointStart: 0,
                pointRange: .5
              },{
                data: [1.99759968],
                type: 'column',
                color: "#1DACE8",
                name: "S_N_AT_Park_tot",

                pointStart: 0,
                pointRange: 25.71
              },
              {
                data: [3.069066148],
                type: 'column',
                color: "#1DACE8",
                name: "S_N_CA_Park_tot",

                pointStart: 25.71,
                pointRange: 25.71,
              },
              {
                data: [4.762283492],
                type: 'column',
                color: "#1DACE8",
                name: "S_N_BTM",

                pointStart: 51.42,
                pointRange: 25.71
              },
               {
                data:[10],
                type: 'column',
                color: "#AEA8A8",
                name: "TESTMARK",
                pointStart: 77.13,
                pointRange: .5
              },
              {
                data: [5.472831225],
                type: 'column',
                color: "#AEA8A8",
                name: "S_N_TR",
                pointStart: 77.13,
                pointRange: 25.71
              },{
                data:[10],
                type: 'column',
                color: "#AEA8A8",
                name: "TESTMARK",
                pointStart: 102.84,
                pointRange: .5
              },
              {
                data: [5.089290648],
                type: 'column',
                color: "#F24D29",
                name: "S_P_DE",

                pointStart: 102.84,
                pointRange: 25.71
              },
              {
                data: [8.593398356],
                type: 'column',
                color: "#F24D29",
                name: "S_P_DI",

                pointStart: 128.55,
                pointRange: 25.71
              },
              {
                data: [5.06165564],
                type: 'column',
                color: "#F24D29",
                name: "S_P_DG",

                pointStart: 154.26,
                pointRange: 25.74
              },
              {
                data:[10],
                type: 'column',
                color: "#AEA8A8",
                name: "TESTMARK",
                pointStart: 180,
                pointRange: .5
              },
              {
                data: [3.63565202],
                type: 'column',
                color: "#EDCB64",
                name: "S_PP_MOT_sec",

                pointStart: 180,
                pointRange: 19.2825
              },
              {
                data: [2.033564998],
                type: 'column',
                color: "#EDCB64",
                name: "S_PP_MOT_tert",

                pointStart: 199.2825,
                pointRange: 19.2825
              },
              {
                data: [1.464012915],
                type: 'column',
                color: "#EDCB64",
                name: "S_PP_MOT_work",

                pointStart: 218.465,
                pointRange: 19.2825
              },
              {
                data: [1.284840194],
                type: 'column',
                color: "#EDCB64",
                name: "S_PP_MOT_other",

                pointStart: 237.6475,
                pointRange: 19.2825
              },
               {
                data:[10],
                type: 'column',
                color: "#AEA8A8",
                name: "TESTMARK",
                pointStart: 256.83,
                pointRange: .5
              },
              {
                data: [5.840454632],
                type: 'column',
                color: "#C4CFD0",
                name: "S_PP_RID_orig",

                pointStart: 256.83,
                pointRange: 8.57
              },
              {
                data: [1.153663761],
                type: 'column',
                color: "#C4CFD0",
                name: "S_PP_RID_rid",

                pointStart: 265.4,
                pointRange: 8.57
              },
              {
                data: [4.159545368],
                type: 'column',
                color: "#C4CFD0",
                name: "S_PP_RID_dest",

                pointStart: 273.97,
                pointRange: 8.57
              },
              {
                data:[10],
                type: 'column',
                color: "#AEA8A8",
                name: "TESTMARK",
                pointStart: 282.54,
                pointRange: .5
              },
              {
                data: [1.283496592],
                type: 'column',
                color: "#76A08A",
                name: "S_PP_EFF_walk",

                pointStart: 282.54,
                pointRange: 25.71
              },
              {
                data: [4.765886288],
                type: 'column',
                color: "#76A08A",
                name: "S_PP_EFF_bike",

                pointStart: 308.25,
                pointRange: 25.71
              },
              {
                data: [4.72029121],
                type: 'column',
                color: "#76A08A",
                name: "S_PP_EFF_far",

                pointStart: 333.96,
                pointRange: 26.04
              }
            ]


var newdata = null


export default {
  components: {
    Rose
  },
  data() {
    return {
            charttest: {
        title: {
          text: ""
        },
        subtitle: {
          text: ""
        },
        legend: {
          enabled: false
        },
        series: originaldata
      },

      selected: [],
      items:[
{city: 'Aalst', value:[ 
 {
  data:[10],
  type: 'column',
  color: '#AEA8A8',
  name: 'TESTMARK',
  pointStart: 0,
  pointRange: .5
}, 
 {
  data: [1.99759968],
  type: 'column',
  color: '#1DACE8',
  name: 'S_N_AT_Park_tot',

  pointStart: 0,
  pointRange: 25.71
},

 {
  data: [3.069066148],
  type: 'column',
  color: '#1DACE8',
  name: 'S_N_CA_Park_tot',

  pointStart: 25.71,
  pointRange: 25.71,
},

 {
  data: [4.762283492],
  type: 'column',
  color: '#1DACE8',
  name: 'S_N_BTM',

  pointStart: 51.42,
  pointRange: 25.71
},

 {
  data:[10],
  type: 'column',
  color: '#AEA8A8',
  name: 'TESTMARK',
  pointStart: 77.13,
  pointRange: .5
},

 {
  data: [5.472831225],
  type: 'column',
  color: '#AEA8A8',
  name: 'S_N_TR',
  pointStart: 77.13,
  pointRange: 25.71
}, 
 {
  data:[10],
  type: 'column',
  color: '#AEA8A8',
  name: 'TESTMARK',
  pointStart: 102.84,
  pointRange: .5
},

 {
  data: [5.089290648],
  type: 'column',
  color: '#F24D29',
  name: 'S_P_DE',

  pointStart: 102.84,
  pointRange: 25.71
},

 {
  data: [8.593398356],
  type: 'column',
  color: '#F24D29',
  name: 'S_P_DI',

  pointStart: 128.55,
  pointRange: 25.71
},

 {
  data: [5.06165564],
  type: 'column',
  color: '#F24D29',
  name: 'S_P_DG',

  pointStart: 154.26,
  pointRange: 25.74
},

 {
  data:[10],
  type: 'column',
  color: '#AEA8A8',
  name: 'TESTMARK',
  pointStart: 180,
  pointRange: .5
},

 {
  data: [3.63565202],
  type: 'column',
  color: '#EDCB64',
  name: 'S_PP_MOT_sec',

  pointStart: 180,
  pointRange: 19.2825
},

 {
  data: [2.033564998],
  type: 'column',
  color: '#EDCB64',
  name: 'S_PP_MOT_tert',

  pointStart: 199.2825,
  pointRange: 19.2825
},

 {
  data: [1.464012915],
  type: 'column',
  color: '#EDCB64',
  name: 'S_PP_MOT_work',

  pointStart: 218.465,
  pointRange: 19.2825
},

 {
  data: [1.284840194],
  type: 'column',
  color: '#EDCB64',
  name: 'S_PP_MOT_other',

  pointStart: 237.6475,
  pointRange: 19.2825
},

 {
  data:[10],
  type: 'column',
  color: '#AEA8A8',
  name: 'TESTMARK',
  pointStart: 256.83,
  pointRange: .5
},

 {
  data: [5.840454632],
  type: 'column',
  color: '#C4CFD0',
  name: 'S_PP_RID_orig',

  pointStart: 256.83,
  pointRange: 8.57
},

 {
  data: [1.153663761],
  type: 'column',
  color: '#C4CFD0',
  name: 'S_PP_RID_rid',

  pointStart: 265.4,
  pointRange: 8.57
},

 {
  data: [4.159545368],
  type: 'column',
  color: '#C4CFD0',
  name: 'S_PP_RID_dest',

  pointStart: 273.97,
  pointRange: 8.57
},

 {
  data:[10],
  type: 'column',
  color: '#AEA8A8',
  name: 'TESTMARK',
  pointStart: 282.54,
  pointRange: .5
},

 {
  data: [1.283496592],
  type: 'column',
  color: '#76A08A',
  name: 'S_PP_EFF_walk',

  pointStart: 282.54,
  pointRange: 25.71
},

 {
  data: [4.765886288],
  type: 'column',
  color: '#76A08A',
  name: 'S_PP_EFF_bike',

  pointStart: 308.25,
  pointRange: 25.71
},

 {
  data: [4.72029121],
  type: 'column',
  color: '#76A08A',
  name: 'S_PP_EFF_far',

  pointStart: 333.96,
  pointRange: 26.04
} 
 ]},
 {city: 'Aalst_Kerrebroek', value:[ 
 {
  data:[10],
  type: 'column',
  color: '#AEA8A8',
  name: 'TESTMARK',
  pointStart: 0,
  pointRange: .5
}, 
 {
  data: [0.018669156],
  type: 'column',
  color: '#1DACE8',
  name: 'S_N_AT_Park_tot',

  pointStart: 0,
  pointRange: 25.71
},

 {
  data: [0.034046693],
  type: 'column',
  color: '#1DACE8',
  name: 'S_N_CA_Park_tot',

  pointStart: 25.71,
  pointRange: 25.71,
},

 {
  data: [0],
  type: 'column',
  color: '#1DACE8',
  name: 'S_N_BTM',

  pointStart: 51.42,
  pointRange: 25.71
},

 {
  data:[10],
  type: 'column',
  color: '#AEA8A8',
  name: 'TESTMARK',
  pointStart: 77.13,
  pointRange: .5
},

 {
  data: [2.093152671],
  type: 'column',
  color: '#AEA8A8',
  name: 'S_N_TR',
  pointStart: 77.13,
  pointRange: 25.71
}, 
 {
  data:[10],
  type: 'column',
  color: '#AEA8A8',
  name: 'TESTMARK',
  pointStart: 102.84,
  pointRange: .5
},

 {
  data: [3.552506153],
  type: 'column',
  color: '#F24D29',
  name: 'S_P_DE',

  pointStart: 102.84,
  pointRange: 25.71
},

 {
  data: [5.948761261],
  type: 'column',
  color: '#F24D29',
  name: 'S_P_DI',

  pointStart: 128.55,
  pointRange: 25.71
},

 {
  data: [2.559114242],
  type: 'column',
  color: '#F24D29',
  name: 'S_P_DG',

  pointStart: 154.26,
  pointRange: 25.74
},

 {
  data:[10],
  type: 'column',
  color: '#AEA8A8',
  name: 'TESTMARK',
  pointStart: 180,
  pointRange: .5
},

 {
  data: [NaN],
  type: 'column',
  color: '#EDCB64',
  name: 'S_PP_MOT_sec',

  pointStart: 180,
  pointRange: 19.2825
},

 {
  data: [NaN],
  type: 'column',
  color: '#EDCB64',
  name: 'S_PP_MOT_tert',

  pointStart: 199.2825,
  pointRange: 19.2825
},

 {
  data: [NaN],
  type: 'column',
  color: '#EDCB64',
  name: 'S_PP_MOT_work',

  pointStart: 218.465,
  pointRange: 19.2825
},

 {
  data: [NaN],
  type: 'column',
  color: '#EDCB64',
  name: 'S_PP_MOT_other',

  pointStart: 237.6475,
  pointRange: 19.2825
},

 {
  data:[10],
  type: 'column',
  color: '#AEA8A8',
  name: 'TESTMARK',
  pointStart: 256.83,
  pointRange: .5
},

 {
  data: [5.356539789],
  type: 'column',
  color: '#C4CFD0',
  name: 'S_PP_RID_orig',

  pointStart: 256.83,
  pointRange: 8.57
},

 {
  data: [0],
  type: 'column',
  color: '#C4CFD0',
  name: 'S_PP_RID_rid',

  pointStart: 265.4,
  pointRange: 8.57
},

 {
  data: [4.643460211],
  type: 'column',
  color: '#C4CFD0',
  name: 'S_PP_RID_dest',

  pointStart: 273.97,
  pointRange: 8.57
},

 {
  data:[10],
  type: 'column',
  color: '#AEA8A8',
  name: 'TESTMARK',
  pointStart: 282.54,
  pointRange: .5
},

 {
  data: [NaN],
  type: 'column',
  color: '#76A08A',
  name: 'S_PP_EFF_walk',

  pointStart: 282.54,
  pointRange: 25.71
},

 {
  data: [NaN],
  type: 'column',
  color: '#76A08A',
  name: 'S_PP_EFF_bike',

  pointStart: 308.25,
  pointRange: 25.71
},

 {
  data: [NaN],
  type: 'column',
  color: '#76A08A',
  name: 'S_PP_EFF_far',

  pointStart: 333.96,
  pointRange: 26.04
} 
 ]},
 {city: 'Aalter', value:[ 
 {
  data:[10],
  type: 'column',
  color: '#AEA8A8',
  name: 'TESTMARK',
  pointStart: 0,
  pointRange: .5
}, 
 {
  data: [0.800106681],
  type: 'column',
  color: '#1DACE8',
  name: 'S_N_AT_Park_tot',

  pointStart: 0,
  pointRange: 25.71
},

 {
  data: [1.707198444],
  type: 'column',
  color: '#1DACE8',
  name: 'S_N_CA_Park_tot',

  pointStart: 25.71,
  pointRange: 25.71,
},

 {
  data: [0.250426257],
  type: 'column',
  color: '#1DACE8',
  name: 'S_N_BTM',

  pointStart: 51.42,
  pointRange: 25.71
},

 {
  data:[10],
  type: 'column',
  color: '#AEA8A8',
  name: 'TESTMARK',
  pointStart: 77.13,
  pointRange: .5
},

 {
  data: [5.731866775],
  type: 'column',
  color: '#AEA8A8',
  name: 'S_N_TR',
  pointStart: 77.13,
  pointRange: 25.71
}, 
 {
  data:[10],
  type: 'column',
  color: '#AEA8A8',
  name: 'TESTMARK',
  pointStart: 102.84,
  pointRange: .5
},

 {
  data: [2.11484936],
  type: 'column',
  color: '#F24D29',
  name: 'S_P_DE',

  pointStart: 102.84,
  pointRange: 25.71
},

 {
  data: [6.085789364],
  type: 'column',
  color: '#F24D29',
  name: 'S_P_DI',

  pointStart: 128.55,
  pointRange: 25.71
},

 {
  data: [2.484591493],
  type: 'column',
  color: '#F24D29',
  name: 'S_P_DG',

  pointStart: 154.26,
  pointRange: 25.74
},

 {
  data:[10],
  type: 'column',
  color: '#AEA8A8',
  name: 'TESTMARK',
  pointStart: 180,
  pointRange: .5
},

 {
  data: [2.148048192],
  type: 'column',
  color: '#EDCB64',
  name: 'S_PP_MOT_sec',

  pointStart: 180,
  pointRange: 19.2825
},

 {
  data: [0.150099573],
  type: 'column',
  color: '#EDCB64',
  name: 'S_PP_MOT_tert',

  pointStart: 199.2825,
  pointRange: 19.2825
},

 {
  data: [0.510468416],
  type: 'column',
  color: '#EDCB64',
  name: 'S_PP_MOT_work',

  pointStart: 218.465,
  pointRange: 19.2825
},

 {
  data: [0.928293708],
  type: 'column',
  color: '#EDCB64',
  name: 'S_PP_MOT_other',

  pointStart: 237.6475,
  pointRange: 19.2825
},

 {
  data:[10],
  type: 'column',
  color: '#AEA8A8',
  name: 'TESTMARK',
  pointStart: 256.83,
  pointRange: .5
},

 {
  data: [8.19394395],
  type: 'column',
  color: '#C4CFD0',
  name: 'S_PP_RID_orig',

  pointStart: 256.83,
  pointRange: 8.57
},

 {
  data: [0.334243618],
  type: 'column',
  color: '#C4CFD0',
  name: 'S_PP_RID_rid',

  pointStart: 265.4,
  pointRange: 8.57
},

 {
  data: [1.80605605],
  type: 'column',
  color: '#C4CFD0',
  name: 'S_PP_RID_dest',

  pointStart: 273.97,
  pointRange: 8.57
},

 {
  data:[10],
  type: 'column',
  color: '#AEA8A8',
  name: 'TESTMARK',
  pointStart: 282.54,
  pointRange: .5
},

 {
  data: [1.916363636],
  type: 'column',
  color: '#76A08A',
  name: 'S_PP_EFF_walk',

  pointStart: 282.54,
  pointRange: 25.71
},

 {
  data: [3.451923077],
  type: 'column',
  color: '#76A08A',
  name: 'S_PP_EFF_bike',

  pointStart: 308.25,
  pointRange: 25.71
},

 {
  data: [5.360663082],
  type: 'column',
  color: '#76A08A',
  name: 'S_PP_EFF_far',

  pointStart: 333.96,
  pointRange: 26.04
} 
 ]}
  ]
    };
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Code for the graph

<template>
  <div>
    <Rose :options="chartOptions" ref="lineCharts" :constructor-type="'chart'"></Rose>
  </div>
</template>

<script>
import { Chart } from "highcharts-vue";
import Highcharts from "highcharts";
import HighchartsMore from "highcharts/highcharts-more";

HighchartsMore(Highcharts);

export default {
  props: ["options"],
  components: {
    Rose: Chart
  },
  data() {
    return {
      chartOptions: Highcharts.merge(this.options, {
        chart: {
          polar: true,
          backgroundColor: "#F5F5F5"
        },
        credits: {
          enabled: false
        },
        exporting: {
          buttons: {
            contextButton: {
              theme: {
                fill: "#F5F5F5"
              }
            }
          }
        },
        pane: {
          startAngle: -90
        },
        xAxis: {
          tickPositions:[0, 25.71, 51.42, 77.13, 102.84, 128.55, 154.26, 180, 199.2825,
          218.465, 237.6475, 256.83, 265.4, 273.97, 282.54, 308.25, 333.96],
          lineWidth: 0,
          min: 0,
          max: 360,
          labels: false
        },
        yAxis:{
          max: 10,
          tickInterval:2,
          labels: false
        },
        plotOptions: {
          series: {
                grouping: true,
                groupPadding:0,
                pointPadding:0,
                borderColor: '#000',
                borderWidth: '0',
                stacking: 'normal',
                pointPlacement: 'between',
                showInLegend: true
          },
          pane: {
            size: '100%'
        },
          column: {
            pointPadding: 0,
            groupPadding: 0          }
        }
      })
    };
  }
};
</script>

@BoussadjraBrahim I'll have 3 containers, so 3 different graphs. The idea is to feed variable 1 to graph 1, variable 2 to graph 2 and so on. If one of the graph isn't populated by data, then it will be empty. I'm sure that there is a better way of doing it but this was the easiest way for me, taking into account he knowledge I have right now. — FilipeTeixeira, Aug 19 '19 at 14:00
the `selected` array will contains the selected cities, what's the problem with it? — Boussadjra Brahim, Aug 19 '19 at 14:04
@BoussadjraBrahim indeed. But if I want to pass that selection to another component that's where I don't know how to do it. I know if it would be saved as a variable. As I've mentioned, my knowledge is limited, so any source of information would be useful. — FilipeTeixeira, Aug 19 '19 at 19:50
how do you want to pass that variables to the other component? — Boussadjra Brahim, Aug 19 '19 at 20:04
@BoussadjraBrahim That's something I don't know and therefor the reason why I asked. — FilipeTeixeira, Aug 20 '19 at 07:12

Steven Spungin · Answer 1 · 2019-08-21T12:18:20.273

Your example does not show where your chart is, so it is hard to provide a specific solution.

If the chart is a child of the listed component, you pass the selected value through a property.

If chart is connected to a parent component, you would emit an event with the selected value.

If the chart is a sibling of the select component, you would create a computed property using selected value. The computed property would be used to configure the chart.

Otherwise you use state management (Vuex), and the selected value would mutate the state. The chart's data would bind using a computed property attached to the store.

Updated Solution

Your update shows that your chart is in the same component as the select, and you use charttest to configure it.

So option #3 is the best approach.

We will move your charttest to a computed property to make it reactive based on the selected value. I added another computed property called filteredData that is now used by the charttest computed, but you can also combined them in the same computed.

You do not need a button to trigger the change, as the computed value will trigger automatically.

function itemIsFiltered(selection, item){

   // If selection is not set or empty, do not show any items.
   if (selection === null || selection === undefined || selection.length === 0){
   {
      return false;
   }


   // CHOOSE ONE of these 

   // Show if item is in any selected city.
   return selection.some(theCity=>itemIsInCity(theCity, item);

   // Show if item is in every selected city.
   return selection.every(theCity=>itemIsInCity(theCity, item);
}

function itemIsInCity(city, item){
{
  // You need to determine if the item is in the city.
  // From your data, it looks like this would be pointStart and pointRange in the item.
  // It not clear how your cities store their location though...
  // You might need some trigonometry here.
}

const vueOptions = {
  computed: {

    filteredData() {
      return this.originaldata
      .filter(item => itemIsFiltered(this.selection, item))
    },

    charttest() {
      return {
        title: {
          text: ""
        },
        subtitle: {
          text: ""
        },
        legend: {
          enabled: false
        },
        series: this.filteredData
      }
    }
  }
}

I've edited the post to be more clear and to include all the information you asked for. I hope it's better now. I'm not sure which would be the best way of doing this. Any suggestions on that? — FilipeTeixeira, Aug 20 '19 at 11:12
It makes indeed more sense. Thank you. The only thing I'm not really understanding is the part inside the original.filter(), so the `item=>` and the following TODO filter that should return boolean. Can't I just have `return this.originaldata.filter(selected)` ? — FilipeTeixeira, Aug 20 '19 at 18:20
The Array.filter function should true or false for each element. You will need to check each item and decide. You also need to consider if you want to 'all' or 'any' match your selection items. — Steven Spungin, Aug 20 '19 at 20:10
I'm really sorry to ask but can you give an example? I really don't understand the answer. — FilipeTeixeira, Aug 21 '19 at 07:02
Thank you a lot for the detailed explanation. I think I know now why the confusion. You mention that I would need to use some trigonometry but that won't be needed. Each entry has a city and a value. That entry has enough information to populate a graph. Meaning that when a city is selected in the dropdown menu, it should load the value into the graph. It's just a matter of pasting the value immediately. That's why I didn't fully understand the boolean part of the comment. — FilipeTeixeira, Aug 22 '19 at 08:26

Vuetify create variable from selection

1 Answers1

Updated Solution