vuetify 中的 v-btn-toggle 返回错误值答案

【问题标题】：v-btn-toggle in vuetify returning the wrong valuevuetify 中的 v-btn-toggle 返回错误值
【发布时间】：2021-04-23 02:42:20
【问题描述】：

我有一个环境数组，我想使用 v-btn-toggle 为每个环境创建一个按钮，问题是当我console.log(this.envSelected) 时，它打印出索引，而不是实际环境.. 我的目标是使按钮看起来像是被点击的。我已经试过:value="envText", value=${environments[envText]}

<template lang="pug">
  v-btn-toggle(
    v-model="envSelected"
    v-on:change='updateSelectedEnv()'
    )
    v-btn(
      v-for="(envText, index) in environments" 
      :key="index"
      vulue={envText}
      ) {{ envText }}  
</template>

<script>
  data() {
    return {
       envSelected:"QA",
       environments: ['DEV', 'IDEV', 'QA', 'STAGE', 'UAT', 'PROD', 'IDEV2', 'QA2'],
    }
  }
</script>

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

v-btn-toggle 的值（因此v-model）是所选项目的索引。要解析该值，请使用索引 (envSelected) 作为对 environments[] 的查找：

console.log(this.environments[this.envSelected])

【讨论】：

我的目标是让按钮看起来像是被点击了，为此我需要按钮的值是实际的环境文本而不是索引。我试图弄清楚为什么 value = index 而不是 value = environment text
v-btn-toggle 仅支持索引值。