javascript - vuetify - 根据按钮的状态更改 v-select 项目
问题描述
因此,我试图根据已在启用和禁用之间更改的按钮的状态,使选择器具有不同的项目。我尝试使用 v-if 和 v-else ,但我觉得这是错误的方法,也没有工作。我觉得这更接近我需要使用的东西,但不确定我做得对。下面是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>
这是下面的脚本。同样在脚本中,我在数据中设置了一个 items[] 为空
methods: {
rulesForOptionsLevel() {
if (accountFeatures.equityTrading === "Disabled") {
items: ["unavailable", "optionsLevel1", "optionsLevel2"];
} else {
items: [
"unavailable",
"optionsLevel1",
"optionsLevel2",
"optionsLevel3",
"optionsLevel4",
"optionsLevel5",
"optionsLevel6",
];
}
},
解决方案
简单地将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",
];
},
},
});
<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>
推荐阅读
- python - 访问表中的表中的表数据
- ios - 保存图像,从库到领域并在不同的视图控制器中呈现
- python - Python 中的 Exchangelib 错误:www-authenticate
- ruby-on-rails - 部署在容器中的 Azure Web 应用程序上的 Mongo 套接字超时
- linux - 如何打印与特定字符串匹配的所有行?
- typescript - 在 combineReducers - Redux - Typescript 中按名称对 reducer 键进行排序
- python - Ubuntu16.04 - 安装 Jupyter 笔记本后,它无法启动并出现错误
- linq - 根据特定顺序在 LINQ 中排序
- java - java openssl X509_SIG 结构和编码/解码功能
- java - 如何使用通用方法对两个不同的用户对象实例执行相同的操作?