javascript - VueJS：基于 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根据所选项目更改所选系列（道具）。我怎样才能做到这一点？

标签： javascriptvue.jsvue-props

Answer 1

你可以做这样的事情。

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

e7的v-model属性在哪里v-select。