Vuetify 从选择中创建变量

【问题标题】：Vuetify create variable from selectionVuetify 从选择中创建变量
【发布时间】：2019-12-24 17:33:00
【问题描述】：

我在 vuetify 中有一个下拉列表，我想从中将选定的选项保存为变量。我想将选项保存为变量的原因是因为稍后我将使用它们来填充 highcharts 图表。 因此，例如，如果选择了前两个城市，我希望保存两个变量。如果只有一个，那么只有一个被保存。我一直在尝试阅读如何做到这一点，但没有任何成功。我知道我可以使用{{selected}} 来显示选择的内容，但不能显示如何保存。

编辑：

下面的示例显示了两个组件。第一个是进行选择并填充图表的组件。 第二个是要使用的图表。

正如另一位用户指出的那样，有几种方法可以做到这一点。理想情况下，我希望用户必须选择 1 个城市，按下按钮，然后生成图表。

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

图表代码

<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 我将有 3 个容器，因此有 3 个不同的图表。这个想法是将变量 1 提供给图 1，将变量 2 提供给图 2，依此类推。如果其中一张图没有被数据填充，那么它将是空的。我确信有更好的方法，但考虑到我现在所掌握的知识，这对我来说是最简单的方法。
  • selected 数组将包含选定的城市，它有什么问题？
  • @BoussadjraBrahim 确实如此。但是，如果我想将该选择传递给另一个我不知道该怎么做的组件。我知道它是否会保存为变量。正如我所提到的，我的知识有限，所以任何信息来源都会很有用。
  • 你想如何将变量传递给其他组件？

标签： vue.js vuetify.js v-select


【解决方案1】：

您的示例没有显示图表的位置，因此很难提供具体的解决方案。

如果图表是所列组件的子组件，您将通过属性传递所选值。

如果图表连接到父组件，您将发出具有所选值的事件。

如果图表是选择组件的同级，您将使用选定值创建计算属性。计算属性将用于配置图表。

否则你使用状态管理（Vuex），并且选择的值会改变状态。图表的数据将使用附加到商店的计算属性进行绑定。

更新的解决方案

您的更新显示您的图表与选择在同一组件中，您使用charttest 对其进行配置。

所以选项 #3 是最好的方法。

我们会将您的图表测试移至计算属性，以使其根据所选值进行反应。我添加了另一个名为 filteredData 的计算属性，现在由 charttest computed 使用，但您也可以将它们组合在同一个计算中。

您不需要按钮来触发更改，因为计算值会自动触发。 

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

【讨论】：

  • 我对帖子进行了编辑，使其更加清晰并包含您要求的所有信息。我希望现在好多了。我不确定哪种方法是最好的方法。对此有何建议？
  • 确实更有意义。谢谢你。我唯一不太了解的是 original.filter() 中的部分，所以 item=&gt; 和下面的 TODO 过滤器应该返回布尔值。我不能只有return this.originaldata.filter(selected) 吗？
  • Array.filter 函数应该为每个元素设置为真或假。您将需要检查每个项目并做出决定。您还需要考虑是否要“全部”或“任何”匹配您的选择项。
  • 我真的很抱歉问你，你能举个例子吗？我真的不明白答案。
  • @FilipeTeixeira 没问题。我会更新解决方案。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2013-07-26
  • 2016-07-19
  • 1970-01-01
  • 1970-01-01
  • 2019-05-15
  • 2013-04-22
  • 2021-09-09
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode