Vuejs 和引导程序。有条件地禁用按钮组中的按钮
Posted
技术标签:
【中文标题】Vuejs 和引导程序。有条件地禁用按钮组中的按钮【英文标题】:Vuejs and Bootstrap. Disable buttons in button group conditionally 【发布时间】:2019-04-28 07:23:24 【问题描述】:我一直致力于将我的一个 Web 应用程序 (jquery/php/bootstrap) 迁移到 VueJS
。这是一个简单的表格,顶部有过滤器控件(带有引导按钮组)。 Here's 在新的 vuejs
应用程序中带有 fitler 控件的代码笔。
在我的旧应用程序中,如果选择了按钮组中的按钮,它将禁用另一个按钮组中的按钮(通过将 disabled
类添加到按钮标签)。例如,第一个按钮组是叶轮尺寸。假设您选择 18" 作为叶轮尺寸,这意味着您只能选择 20.5" 外壳尺寸,而笼尺寸的其他按钮将被禁用。我用这样的 jquery 函数做到了这一点:
$('input:radio').change(function()
var senderName = this.name;
var senderValue = this.value;
var senderID = this.id;
if (senderName == "imp_size")
switch(senderValue)
case "18":
$("#btnCageSize > label > #20\\.5").parent().removeClass("disabled");
$("#btnCageSize > label > #28\\.5").prop("checked", false).parent().removeClass("active").addClass("disabled");
$("#btnCageSize > label > #31").prop("checked", false).parent().removeClass("active").addClass("disabled");
//console.log('check');
break;
case "24":
$("#btnCageSize > label > #20\\.5").prop("checked", false).parent().removeClass("active").addClass("disabled");
$("#btnCageSize > label > #28\\.5").parent().removeClass("disabled");
$("#btnCageSize > label > #31").prop("checked", false).parent().removeClass("active").addClass("disabled");
break;
case "26":
$("#btnCageSize > label > #20\\.5").prop("checked", false).parent().removeClass("active").addClass("disabled");
$("#btnCageSize > label > #28\\.5").prop("checked", false).parent().removeClass("active").addClass("disabled");
$("#btnCageSize > label > #31").parent().removeClass("disabled");
break;
...
我的问题是我应该只重用这个 jquery 函数还是使用 vuejs 有更优雅的方法?我对 vue 非常陌生,并且学习了所有的细微差别和完成工作的方法,考虑到我的按钮组在 v-for
循环中,我只是不知道如何处理这个问题。我什至考虑过放弃引导程序并在 vue 库中重写整个东西,比如 vuetify。
【问题讨论】:
类似于:class=" 'active': selectedImpellerSize === impSize "
根据数据变量的值动态设置元素上的活动类,您也可以对 disabled 属性执行相同操作。
简答,不。您不想在 vue 应用程序中使用 jQuery 执行此逻辑。您想更新数据模型并让 vue 相应地调整视图。
【参考方案1】:
一定要用 Vue.js 重写它。 正是这些“状态”在 Vue 中比通过 jQuery 更容易管理。
在每个按钮内,可以绑定:disabled
属性并添加逻辑条件。
也许您的应用程序中有一个变量imp_size
,那么依赖于该值的每个按钮都可以类似于
<button :disabled="imp_size !== '18\"'">
表示当imp_size
不是18"
时,按钮被禁用。
我建议你也看看https://bootstrap-vue.js.org/。
【讨论】:
我最终在我的类绑定中使用条件语句:codepen.io/drpcken/pen/RqYxZX 我觉得它可能更干净但它有效!谢谢!以上是关于Vuejs 和引导程序。有条件地禁用按钮组中的按钮的主要内容,如果未能解决你的问题,请参考以下文章