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",
];
}
},
CodePudding user response：
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>
CodePudding user response：
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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>