使用对象的选项数组 Vuetify Select 阻止更新发生？

Question

我使用 vue-chartjs and am supplying color schemes via chartjs-plugin-colorschemes 显示了一个圆环图。

我正在努力让用户能够切换配色方案并将他们选择的方案保存到数据库中，但是我运行遇到了一个奇怪的问题。将 colors 数组添加到提供给 Vuetify select 的选项时，它会阻止图表更新为新的配色方案。我已经将它具体缩小到这个范围，因为如果我从选项中删除 colors 数组，它会正确更新图表（但是我无法像我在select 下拉菜单）。

为什么向 Vuetify 添加属性 select 会破坏此功能？是因为它们是动态生成的吗？

**ParentComponent.vue:**lang-vue

    <template>
      <div
        class="chart-wrapper">
        <child-graph
          v-resize="onResize"
          :chart-data="chartData"
          :is-mobile="isMobile"
          :styles="graphStyles"
          :theme="localTheme" />
      </div>
    
      <pack-theme-modal
        v-model="themeModalOpen"
        :theme="localTheme"
        @handle-update="handleUpdateTheme" />
    </template>
    
    <script>
      export default {
        data () {
          localTheme: '',
          themeModalOpen: false
        },
    
        methods: {
          handleUpdateTheme (theme) {
            this.localTheme = theme;
            this.themeModalOpen = false;
          }
        }
      }
    </script>

ChildGraph.vue:

    <script>
      import { Doughnut, mixins } from 'vue-chartjs';
      import Chart from 'chart.js';
      import 'chartjs-plugin-colorschemes';
      const { reactiveProp } = mixins;
    
      export default {
        extends: Doughnut,
    
        mixins: [reactiveProp],
    
        props: {
          theme: {
            type: String,
            default: ''
          }
        },
    
        data () {
          const vm = this;
          return {
            options: {
              cutoutPercentage: 75,
              legend: {
                display: true,
                position: 'right'
              },
              plugins: {
                colorschemes: {
                  scheme: this.theme
                }
              },
              responsive: true,
              maintainAspectRatio: false,
              tooltips: {
                enabled: false
              },
            }
          };
        },
    
        mounted () {
          this.renderChart(this.chartData, this.options);
        },
    
        watch: {
          theme (newVal, oldVal) {
            console.log({ newVal });
            const chart = this.$data._chart;
            chart.options.plugins.colorschemes.scheme = newVal;
            chart.update();
          }
        }
      };
    </script>

ThemeModal.vue:

<template>
  <v-dialog
    v-model="show"
    max-width="750">
    <v-card>
      <v-card-title>
        Choose a New Chart Color Theme
      </v-card-title>
      <v-card-text>
        <v-container>
          <v-row>
            <v-col cols="12">
              <v-select
                v-model="localTheme"
                color="primary"
                dense
                item-text="text"
                item-value="value"
                :items="options"
                label="Theme Options"
                outlined>
                <template #selection="{ item }">
                  <p class="mb-0 mr-4 text-body-1">
                    {{ item.text }}
                  </p>
                  <color-swatch :colors="item.colors" />
                </template>
                <template #item="{ item, attrs, on }">
                  <v-list-item
                    v-bind="attrs"
                    v-on="on">
                    <v-list-item-content>
                      <v-list-item-title>
                        <span class="mr-4">{{ item.text }}</span>
                        <color-swatch :colors="item.colors" />
                      </v-list-item-title>
                    </v-list-item-content>
                  </v-list-item>
                </template>
              </v-select>
            </v-col>
          </v-row>
        </v-container>
      </v-card-text>
      <v-card-actions class="justify-space-between">
        <v-btn
          class="grey7--text"
          :ripple="false"
          text
          @click="closeModal">
          Cancel
        </v-btn>
        <v-btn
          color="primary"
          depressed
          :ripple="false"
          @click="handleUpdate">
          <span>Update Theme</span>
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
  import 'chartjs-plugin-colorschemes/src/plugins/plugin.colorschemes';
  import { Blue6, BlueGreen6, Breeze6, Celestial6, Circuit6, Damask6, Depth6, Flow6, Forte6, Genesis6, IonBoardroom6, Kilter6 } from 'chartjs-plugin-colorschemes/src/colorschemes/colorschemes.office';
  import { Tableau10, ColorBlind10, JewelBright9, HueCircle19 } from 'chartjs-plugin-colorschemes/src/colorschemes/colorschemes.tableau';
  import ColorSwatch from '~/components/ColorSwatch.vue';

  export default {
    props: {
      theme: {
        type: String,
        default: ''
      },
      value: {
        type: Boolean,
        default: false
      }
    },

    data () {
      return {
        localTheme: this.theme || 'tableau.Tableau10',
        options: [
          // COMMENTED OUT OPTIONS WORK, BUT DON'T DISPLAY COLOR SWATCH
          // { text: 'Theme 1', value: 'office.Blue6' },
          // { text: 'Theme 2', value: 'office.BlueGreen6' },
          // { text: 'Theme 3', value: 'office.Breeze6' },
          // { text: 'Theme 4', value: 'office.Celestial6' },
          // { text: 'Theme 5', value: 'office.Circuit6' },
          // { text: 'Theme 6', value: 'office.Damask6' },
          // { text: 'Theme 7', value: 'office.Depth6' },
          // { text: 'Theme 8', value: 'office.Flow6' },
          // { text: 'Theme 9', value: 'office.Forte6' },
          // { text: 'Theme 10', value: 'office.Genesis6' },
          // { text: 'Theme 11', value: 'office.IonBoardroom6' },
          // { text: 'Theme 12', value: 'office.Kilter6' },
          // { text: 'Theme 13', value: 'tableau.Tableau10' },
          // { text: 'Theme 14', value: 'tableau.ColorBlind10' },
          // { text: 'Theme 15', value: 'tableau.JewelBright9' },
          // { text: 'Theme 16', value: 'tableau.HueCircle19' }

          // COMMMENTED IN OPTIONS SHOW COLOR SWATCH BUT DON'T UPDATE GRAPH
          { text: 'Theme 1', value: 'office.Blue6', colors: Blue6.map(color => color) },
          { text: 'Theme 2', value: 'office.BlueGreen6', colors: BlueGreen6.map(color => color) },
          { text: 'Theme 3', value: 'office.Breeze6', colors: Breeze6.map(color => color) },
          { text: 'Theme 4', value: 'office.Celestial6', colors: Celestial6.map(color => color) },
          { text: 'Theme 5', value: 'office.Circuit6', colors: Circuit6.map(color => color) },
          { text: 'Theme 6', value: 'office.Damask6', colors: Damask6.map(color => color) },
          { text: 'Theme 7', value: 'office.Depth6', colors: Depth6.map(color => color) },
          { text: 'Theme 8', value: 'office.Flow6', colors: Flow6.map(color => color) },
          { text: 'Theme 9', value: 'office.Forte6', colors: Forte6.map(color => color) },
          { text: 'Theme 10', value: 'office.Genesis6', colors: Genesis6.map(color => color) },
          { text: 'Theme 11', value: 'office.IonBoardroom6', colors: IonBoardroom6.map(color => color) },
          { text: 'Theme 12', value: 'office.Kilter6', colors: Kilter6.map(color => color) },
          { text: 'Theme 13', value: 'tableau.Tableau10', colors: Tableau10.map(color => color) },
          { text: 'Theme 14', value: 'tableau.ColorBlind10', colors: ColorBlind10.map(color => color) },
          { text: 'Theme 15', value: 'tableau.JewelBright9', colors: JewelBright9.map(color => color) },
          { text: 'Theme 16', value: 'tableau.HueCircle19', colors: HueCircle19.map(color => color) }
        ]
      };
    },

    computed: {
      show: {
        get () {
          return this.value;
        },
        set (value) {
          this.$emit('input', value);
        }
      }
    },

    methods: {
      closeModal () {
        this.show = false;
      },
      handleUpdate () {
        this.$emit('handle-update', this.localTheme);
      }
    },

    watch: {
      theme (val) {
        this.localTheme = val;
      }
    },

    components: {
      ColorSwatch
    }
  };
</script>

Answer 1

在 Hail Mary 尝试中，我在 chartjs-plugin-colorschemes 文档中发现了一些内容，其中提到在数据的配色方案对象中设置 override: true。添加它以某种方式修复了它！

plugins: {
  colorschemes: {
    scheme: this.theme,
    override: true
  }
},

使用对象的选项数组 Vuetify Select 阻止更新发生？

Vuetify Select with options array of objects prevents update from occurring?

vue.js

vuetify.js

vue-chartjs