VueJS: Dynami c реквизит на основе элемента v-select

Question

У меня есть диаграмма, в которой используются свойства.

<template>
    <v-row>
      <v-col col="12" sm="12">
        <Chart :data="series2"></Chart> ### This chart receives the props
      </v-col>
      <v-col cols="12" sm="6">
        <v-select
          item-color="red"
          item-text="muh"
          v-model="e7"
          :items="items"
          label="Select"
          single
          chips
          hint="Which series do you want?"
          persistent-hint
        ></v-select>
      </v-col>
    </v-row>
</template>

Это мой сценарий с серией.

<script>
import Chart from "./Chart"

    export default {

    data: function () {
      return {
        e7: [],
        series1: [1,2,3,4,5],
        series2: [5,6,5,6,5],
        series3: [5,4,3,2,1],
        items: ["series1", "series2", "series3"]
      }
    },
     components: {
        Chart
    },
  }

</script>

Передача реквизита работает нормально, но я хочу v-select для изменения выбранной серии (реквизита) на основе выбранного элемента. Как я могу это сделать?

Answer 1

Создать вычисляемое свойство, чтобы строка e7 не была массивом

<v-col col="12" sm="12">
  <Chart :data="selectedSeries"></Chart>
</v-col>


computed:{
selectedSeries(){
return this.e7="series1"?this.series1:this.e7="series2"?this.series2:this.e7="series3"?this.series3:this.series1;
}

}

Answer 2

Вы можете сделать что-то вроде этого.

<Chart :data="$data[e7]"></Chart>

Где e7 - атрибут v-model для v-select.