我一直致力于将我的一个 Web 应用程序 (jquery/php/bootstrap) 迁移到 VueJS
。这是一个简单的表格,顶部有过滤器控件(带有 Bootstrap 按钮组)。 Here's新 vuejs
应用程序中带有 fitler 控件的 codepen。
在我的旧应用程序中,如果选择了按钮组中的按钮,它将禁用另一个按钮组中的按钮(通过将 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 循环中,我只是不知道如何处理这个问题。我什至考虑放弃 bootstrap 并在 vue 库(例如 vuetify)中重写整个内容。
最佳答案
一定要在 Vue.js 中重写它。 正是这些“状态”在 Vue 中比通过 jQuery 更容易管理。
在每个按钮内,您可以绑定(bind) :disabled
属性并添加逻辑条件。
也许您的应用程序中有一个变量imp_size
,那么依赖于该值的每个按钮都可以是这样的
<button :disabled="imp_size !== '18\"'">
这意味着当 imp_size
为 18"
以外的任何值时,该按钮将被禁用。
我建议您看看https://bootstrap-vue.js.org/也是。
关于javascript - Vuejs 和 Bootstrap。有条件地禁用按钮组中的按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53484666/