禁用当前选择，直到在前一个选择中输入了某个值

Posted 2023-02-16

【中文标题】禁用当前选择，直到在前一个选择中输入了某个值

【英文标题】：disable current selection until some value is inputed in the previous selection

【发布时间】：2021-12-01 15:30:41

【问题描述】：

我正在与BootstrapVue 合作。

我有以下问题。我有一个b-form-input，我在b-form-select 上搜索我的number。所以我选择了 3 个值并在我的输入字段和其他方式中获取一个数字 - 所以它是一个 自动填充。

这很好用 - 因此我认为我不需要向您展示代码。

问题是我想禁用所有选择（而不是第一个），直到之前的字段被选中。

我有一个问题，如果我有多个元素，所有元素都会被更新。因此，如果我在第一个元素的Input1 中输入一些内容，那么所有其他元素中的第二个Input 将是!disabled

附加信息：IDParent 是道具！

如果您需要任何其他代码，我可以更新我的问题！

<template>
  <div>
    <div class="mt-2" v-for="(IDChild, indexChild) in inputs" :key="indexChild">
      <div>
        <div class="mt-2">Number</div>
        <b-form-input type="number" v-model="IDChild.Number" :value="IDChild.Number"></b-form-input>
      </div>

      <div>
        <div class="mt-2">Input 1</div>
        <b-form-select v-model="IDChild.Input1" :value="IDChild.Input1" :options="optionsInput1" @input="searchNumber(IDChild, IDParent, indexChild)"></b-form-select>
      </div>
      <div>
        <div class="mt-2">Input 2</div>
        <b-form-select :disabled="disabledInput2" v-model="IDChild.Input2" :value="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="disabledInput3" v-model="IDChild.Input3" :value="IDChild.Input3" :options="optionsInput3" @input="searchNumber(IDChild, IDParent, indexChild)"></b-form-select>
      </div>
    </div>

    <!-- add new element when button was clicked -->
    <div class="mt-4 mb-5 ml-3 mr-3">
      <b-button @click="addElement"> Add Element </b-button>
    </div>
  </div>
</template>  

我的脚本：

<script>
import json from "./json/json.json";

export default 
  name: "Test",

  methods: 
    addElement() 
      this.inputs.push();
    ,

    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) 
        this.disabledInput2 = false;
      
      if(input.Input2) 
        this.disabledInput3 = false;
      
    ,
  ,

  props: [
    "IDParent",
    ],

  data() 
    return 
      inputs: [],
      json: json,
      disabledInput2: true,
      disabledInput3: true,
    ;
  ,
;
</script>

【问题讨论】：

能否提供定义disabledInput2 和disabledInput3 的代码？如果我们不知道这些布尔值何时设置，我们不可能告诉你为什么它们会意外翻转

已更新 - 希望现在清楚了！

【参考方案1】：

您缺少的是数据的多层模型，您可以在 searchNumber 函数中调用它并调用您的 :disabled 属性。

在您的v-for="(IDChild, indexChild) in inputs" 中，您可以使用IDChild 或indexChild。例如，您可以拨打:disabled="disabledInput2[indexChild]"。这样您就可以使用特定的indexChild 来引用disabledInput2。

你还需要在你的函数中处理这个，例如this.disabledInput2[indexChild] = false;。

基本上它与使用v-model在同一个对象中存储多层数据相同。

---

编辑：一般示例

我为此示例创建了以下属性。我们将myNumberInput 作为一个对象来处理数字的多个输入字段。 mySelectionData 提供了两个对象的简单集合，每个对象有 3 个选择数组。 myDisableData 是将处理此选择的多个 disabled 属性的对象：

    myNumberInput: ,
    mySelectionData: 
        1: 
            1: [
                 name: "1A", value: 1 ,  name: "2A", value: 2 ,  name: "3A", value: 3 
            ],
            2: [
                 name: "4A", value: 4 ,  name: "5A", value: 5 ,  name: "6A", value: 6 
            ],
            3: [
                 name: "7A", value: 7 ,  name: "8A", value: 8 ,  name: "9A", value: 9 
            ]
        ,
        2: 
            1: [
                 name: "1B", value: 11 ,  name: "2B", value: 21 ,  name: "3B", value: 31 
            ],
            2: [
                 name: "4B", value: 41 ,  name: "5B", value: 51 ,  name: "6B", value: 61 
            ],
            3: [
                 name: "7B", value: 71 ,  name: "8B", value: 81 ,  name: "9B", value: 91 
            ]
        
    ,
    myDisableData: 

从mySelectionData 对象，我们将使用这个函数构建我们的myDisableData：

setupMyDisableData() 
      Object.keys(this.mySelectionData).forEach(parent_key => 
        Object.assign(this.myDisableData, [parent_key]: )
        Object.keys(this.mySelectionData[parent_key]).forEach(child_key => 
          Object.assign(this.myDisableData[parent_key], [child_key]: true)
        );
      );
    

这将通过我们的“父母”循环，将他们的index 分配给myDisableData，并通过“孩子”循环并将他们的index 分配给myDisableData，其中“父母”-index 作为指针。之后我们就有了一个多层对象，它能够为每个选择提供diabled=true 或false。

此示例的 html 如下所示：

<div v-for="(item,index) in mySelectionData" :key="index">
        <input type="number" v-model="myNumberInput[index]" @input="enableMySelection(index, myNumberInput[index])">
        <div v-for="(child_item, child_index) in item" :key="child_index">
          <select :disabled="myDisableData[index][child_index]">
            <option v-for="(child_option, child_option_index) in child_item" :key="child_option_index" :value="child_option.value">child_option.name</option>
          </select>
        </div>
      </div>

因为我不使用BootstrapVue，所以我的 html 看起来不同，但我想你会明白的。您现在只需通过“父”和“子”的index 来引用这三个对象。在此示例中，函数enableMySelection 将根据在input 中输入的数字启用选择。函数如下所示：

enableMySelection(parent_index, input_number) 
      Object.keys(this.myDisableData[parent_index]).forEach(child_key => 
        this.myDisableData[parent_index][child_key] = true;
      );
      this.myDisableData[parent_index][input_number] = false;
    

因此，如果您在第一个输入中输入“2”，它将启用第一个块的第二个选择。如果您在第二个输入中输入 1，它将启用第二个块中的第一个选择。

正如我所说，这只是一个一般性示例，但这应该足以帮助您定义结构以处理您的多个输入和选择。

【讨论】：

您好，感谢您尝试帮助我！ - 我已将所有内容更改为this.disabledInputX[indexChild]，但现在所有内容都已启用 - 我认为这是因为我的data - 我应该如何将它写在那里？因为从逻辑上讲disabledInputX[indexChild]: true 是行不通的..

@B0BBY 目前你有disabledInput2: true，但它需要是一个对象或数组来存储数据。由于我不知道您的数据结构并且不使用BootstrapVue，因此我用一个一般示例编辑了我的答案。