#javascript #vuetify.js
Вопрос:
Поэтому я пытаюсь сделать так, чтобы в селекторе были разные элементы в зависимости от состояния кнопки, которая уже меняется между включенной и отключенной. Я пытался использовать v-if и v-else, но я чувствую, что это неправильный способ, и он также не работал. Я чувствую, что это ближе к тому, что мне нужно использовать, но не уверен, что делаю это правильно. ниже приведен html-код
lt;v-col class="col-3"gt; lt;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" gt;lt;/v-selectgt; lt;/v-colgt; это сценарий ниже. Также в скрипте я сделал элементы[] пустыми в данных
methods: { rulesForOptionsLevel() { if (accountFeatures.equityTrading === "Disabled") { items: ["unavailable", "optionsLevel1", "optionsLevel2"]; } else { items: [ "unavailable", "optionsLevel1", "optionsLevel2", "optionsLevel3", "optionsLevel4", "optionsLevel5", "optionsLevel6", ]; } }, Ответ №1:
Просто измените 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", ]; }, }, }); lt;link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"gt; lt;link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet"gt; lt;link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"gt; lt;script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"gt;lt;/scriptgt; lt;script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"gt;lt;/scriptgt; lt;div id="app"gt; lt;v-appgt; lt;v-col class="col-3"gt; lt;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"gt;lt;/v-selectgt; lt;/v-colgt; lt;v-btn elevation="2" @click="toggleEquityTrading()"gt;Toggle Equitylt;/v-btngt; lt;/v-appgt; lt;/divgt; Комментарии:
1. Спасибо! Это определенно отвечает тому, как я пытался сделать это раньше. Я обнаружил, что вы также можете сделать это с помощью того, как я написал выше. Считаете ли вы, что либо это лучший способ решить эту проблему, либо не имеет значения, какой метод используется?
2. Я считаю
computed, что свойство для заполнения элементов во время выполнения-это правильный путь. вычисляемые свойства, как вы знаете, кэшируются и изменяются только при изменении значений, к которым они привязываются. С другой стороны, выражения и методы всегда оцениваются. Кроме того, я заметил, что вы создали два отдельных массива для сохранения различных значений элементов, что было действительно неуместно.3. Я понимаю. Спасибо вам за объяснение разницы и за ваш ответ!
Ответ №2:
понял это. Нет необходимости в функции, вы можете просто использовать тот же метод, что и для чего-то вроде отключено. Если эта учетная запись имеет значение.маржа отключена, то она выбирает товары, а если нет, то она выбирает товары2
] lt;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" gt;lt;/v-selectgt;