BootstrapVue循环级联选择禁用状态全局生效问题如何修复

问题根因 #

你当前的bug是因为把disabledInput2、disabledInput3定义为了组件全局的data属性，所有循环生成的表单组共用这两个状态变量，只要任意一组修改了这两个值，所有组的禁用状态都会同步更新，自然会出现操作第一组其余组都跟着变化的问题。

修复方案 #

按照下面三步修改即可：

1. 调整data定义和新增逻辑，把禁用状态下沉到每个表单组内部
   删掉原来全局的disabledInput2、disabledInput3属性，给每个inputs数组的子项单独维护自己的禁用状态：

data() {
  return {
    // 初始化的第一个表单组就带默认禁用状态
    inputs: [{
      disabledInput2: true,
      disabledInput3: true
    }],
    json: json,
  };
},
methods: {
  addElement() {
    // 新增的表单组也带默认禁用状态
    this.inputs.push({
      disabledInput2: true,
      disabledInput3: true
    });
  },
}

2. 修改模板的禁用属性绑定
   把原来绑定全局状态的逻辑改成绑定当前循环项自己的状态：

<div>
  <div class="mt-2">Input 2</div>
  <b-form-select :disabled="IDChild.disabledInput2" v-model="IDChild.Input2" :options="optionsInput2" @input="searchNumber(IDChild, IDParent, indexChild)"></b-form-select>
</div>
<div>
  <div class="mt-2">Input 3</div>
  <b-form-select :disabled="IDChild.disabledInput3" v-model="IDChild.Input3" :options="optionsInput3" @input="searchNumber(IDChild, IDParent, indexChild)"></b-form-select>
</div>

补充：你原来的表单控件同时写了v-model和:value属于冗余代码，v-model已经默认实现了双向绑定，不需要额外加:value，可以直接删掉。

3. 修改searchNumber里的状态赋值逻辑
   把原来修改全局状态的逻辑改成修改当前操作的表单组自己的状态，还可以补充清空逻辑，避免前面的选择改了后面还留着旧值：

searchNumber(input, IDParent, indexChild) {
  input.Number = "";

  this.json.forEach((element) => {
    if (
      element.Input1 == input.Input1 &&
      element.Input2 == input.Input2 &&
      element.Input3 == input.Input3 
    ) {
      for (const key of Object.keys(element)) {
        input[key] = element[key];
      }
    }
  });

  if(input.Input1) {
    input.disabledInput2 = false;
  } else {
    // Input1清空时，重置后面的选择框并禁用
    input.Input2 = ''
    input.disabledInput2 = true
    input.Input3 = ''
    input.disabledInput3 = true
  }
  if(input.Input2) {
    input.disabledInput3 = false;
  } else {
    // Input2清空时，重置Input3并禁用
    input.Input3 = ''
    input.disabledInput3 = true
  }
},

内容的提问来源于stack exchange，提问作者user16365685