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
– FilipeTeixeira, Commented Aug 19, 2019 at 14:00
the selected array will contains the selected cities, what's the problem with it? — Boussadjra Brahim
– Boussadjra Brahim, Commented Aug 19, 2019 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
– FilipeTeixeira, Commented Aug 19, 2019 at 19:50
how do you want to pass that variables to the other component? — Boussadjra Brahim
– Boussadjra Brahim, Commented Aug 19, 2019 at 20:04

Steven Spungin · Accepted Answer · 2019-08-21 12:18:20Z

1

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
      }
    }
  }
}

edited Aug 21, 2019 at 12:18

answered Aug 20, 2019 at 8:56

Steven Spungin

29.5k7 gold badges97 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

FilipeTeixeira Over a year ago

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 Over a year ago

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) ?

Steven Spungin Over a year ago

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.

FilipeTeixeira Over a year ago

I'm really sorry to ask but can you give an example? I really don't understand the answer.

Steven Spungin Over a year ago

@FilipeTeixeira no problem. I will update the solution.

|

Collectives™ on Stack Overflow

Vuetify create variable from selection

1 Answer 1

Updated Solution

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Updated Solution

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related