vuetify - 根据按钮的状态更改 v-select 项

Question

所以我试图让选择器有不同的项目，这取决于已经在启用和禁用之间变化的按钮的状态。我尝试使用 v-if 和 v-else，但我觉得这样做是错误的，而且也没有用。我觉得这更接近我需要使用的东西，但我不确定我做得对不对。下面是 html

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

这是下面的脚本。同样在脚本中，我在 data

中将 items[] 设为空

methods: {
    rulesForOptionsLevel() {
    if (accountFeatures.equityTrading === "Disabled") {
      items: ["unavailable", "optionsLevel1", "optionsLevel2"];
    } else {
      items: [
        "unavailable",
        "optionsLevel1",
        "optionsLevel2",
        "optionsLevel3",
        "optionsLevel4",
        "optionsLevel5",
        "optionsLevel6",
      ];
    }
    },

Answer 1

想通了。不需要该功能，您可以简单地使用与禁用之类的方法相同的方法。如果 accountFeatures.margin 等于 disabled 那么它选择项目，如果不是那么它选择 items2

] <v-select
              :items="accountFeatures.margin === 'Disabled' ? items : items2"
              outlined
              dense
              :disabled="
                accountFeatures.optionsTrading === 'Disabled' ? true : false
              "
              v-model="accountFeatures.optionsLevel"
              @change="changeOptionsLevel"
              :menu-props="{ top: true, offsetY: true }"
              label="Level"
            ></v-select>

Answer 2

简单地将 rulesForOptionsLevel 方法更改为计算属性。

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data() {
    return {
      accountFeatures: {
        optionsTrading: "disabled",
        optionsLevel: "",
        equityTrading: "Disabled"
      }
    };
  },
  methods: {
    changeOptionsLevel() {
      console.log('Options changed!');
    },
    toggleEquityTrading(){
      if(this.accountFeatures.equityTrading=="Enabled")
        this.accountFeatures.equityTrading = "Disabled";
      else
        this.accountFeatures.equityTrading = "Enabled";
      console.log(`accountFeatures.equityTrading: ${this.accountFeatures.equityTrading}`);
    }
  },
  computed: {
    rulesForOptionsLevel() {
      if (this.accountFeatures.equityTrading === "Disabled")
        return ["unavailable", "optionsLevel1", "optionsLevel2"];
      else
        return [
          "unavailable",
          "optionsLevel1",
          "optionsLevel2",
          "optionsLevel3",
          "optionsLevel4",
          "optionsLevel5",
          "optionsLevel6",
        ];

    },
  },
});

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
  <v-app>
    <v-col class="col-3">
      <v-select :items="rulesForOptionsLevel" outlined dense :disabled="accountFeatures.optionsTrading === 'Disabled' ? true : false" v-model="accountFeatures.optionsLevel" @change="changeOptionsLevel" :menu-props="{ top: true, offsetY: true }" label="Level"></v-select>
    </v-col>
    <v-btn elevation="2" @click="toggleEquityTrading()">Toggle Equity</v-btn>
  </v-app>
</div>

vuetify - 根据按钮的状态更改 v-select 项

vuetify - change the v-select items depending on the state of a button

javascript

vuetify.js