Vuetify如何根据按钮状态动态修改v-select组件的items选项

现有代码问题 #

• v-select的:items属性直接绑定了方法名rulesForOptionsLevel，没有执行调用，实际传给组件的是方法本身而非返回的数组，无法正常渲染选项
• 方法内部逻辑存在语法错误：一是没有用return返回需要的数组，二是访问Vue实例上的accountFeatures等属性需要加this.前缀，否则会出现变量未定义的报错
• 这类依赖响应式变量动态生成的列表，用computed计算属性比methods更适配，只要依赖的accountFeatures.equityTrading发生变化，计算属性会自动更新，性能和易用性都更好

修正后代码 #

模板部分 #

<v-col class="col-3">
  <v-select
    :items="rulesForOptionsLevel"
    outlined
    dense
    :disabled="accountFeatures.optionsTrading === 'Disabled'"
    v-model="accountFeatures.optionsLevel"
    @change="changeOptionsLevel"
    :menu-props="{ top: true, offsetY: true }"
    label="Level"
  ></v-select>
</v-col>

这里额外简化了disabled的判断逻辑，原三元表达式冗余，直接返回判断结果的布尔值即可

脚本部分 #

export default {
  data() {
    return {
      accountFeatures: {
        // 保留你原有accountFeatures的定义逻辑即可
        equityTrading: '',
        optionsTrading: '',
        optionsLevel: ''
      }
    }
  },
  computed: {
    rulesForOptionsLevel() {
      if (this.accountFeatures.equityTrading === "Disabled") {
        return ["unavailable", "optionsLevel1", "optionsLevel2"]
      } 
      return [
        "unavailable",
        "optionsLevel1",
        "optionsLevel2",
        "optionsLevel3",
        "optionsLevel4",
        "optionsLevel5",
        "optionsLevel6"
      ]
    }
  },
  methods: {
    changeOptionsLevel() {
      // 保留你原有change事件的处理逻辑即可
    }
  }
}

你原来在data里声明的空数组items不需要再使用，计算属性会直接返回符合要求的选项列表给v-select。

内容的提问来源于stack exchange，提问作者pandasruler