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

user_16819283 0
Viewed 112

So I am trying to make the selector have different items depending on the state of a button that already changes between Enabled and Disabled. I tried to use v-if and v-else but I feel that is the wrong way to go about it and also was not working. I feel this is closer to what I need to use but am not sure I'm doing it right. below is the 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>

this is the script below. Also in the script I made an items[] empty in data

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

Simple change the rulesForOptionsLevel method to a computed property.

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>

user_160465210

figured it out. No need for the function you can simply use the same method as for something like disabled. If that accountFeatures.margin equals disabled then it chooses items and if not then it chooses 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>
user_168192830
Related