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",
];
}
},
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>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>