禁用當前選擇，直到在前一個選擇中輸入某個值

Question

我正在使用BootstrapVue 。

我有以下問題。 我有一個b-form-input ，我正在通過我的b-form-select搜索我的number 。 所以我選擇 3 個值並在我的輸入字段和其他方式中獲取一個數字 - 所以它是一個Autofill 。

這工作正常 - 因此我認為我不需要向您展示代碼。

問題是我想禁用所有選擇（而不是第一個），直到選擇之前的字段。

我有一個問題，如果我有多個元素，所有元素都會被更新。 因此，如果我在第一個元素的Input1中輸入某些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>

Answer 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，它將啟用第二個塊中的第一個選擇。

正如我所說，這只是一個通用示例，但這應該足以幫助您定義處理多個輸入和選擇的結構。