Entonces, estoy tratando de hacer que el selector tenga diferentes elementos según el estado de un botón que ya cambia entre Habilitado y Deshabilitado. Traté de usar v-if y v-else, pero creo que es la forma incorrecta de hacerlo y tampoco funcionó. Siento que esto está más cerca de lo que necesito usar, pero no estoy seguro de estar haciéndolo bien. abajo esta el 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>este es el guión de abajo. También en el script hice elementos [] vacíos en datos
methods: { rulesForOptionsLevel() { if (accountFeatures.equityTrading === "Disabled") { items: ["unavailable", "optionsLevel1", "optionsLevel2"]; } else { items: [ "unavailable", "optionsLevel1", "optionsLevel2", "optionsLevel3", "optionsLevel4", "optionsLevel5", "optionsLevel6", ]; } },Simplemente cambie el método rulesForOptionsLevel a una propiedad calculada.
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>Lo averigué. No necesita la función, simplemente puede usar el mismo método que para algo como deshabilitado. Si esa cuentaCaracterísticas.margen es igual a deshabilitado, entonces elige artículos y si no, elige artículos2
] <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>