禁用当前选择,直到在上一个选择中输入某个值
disable current selection until some value is inputed in the previous selection
我正在与 BootstrapVue
合作。
我有以下问题。我有一个 b-form-input
,我在其中搜索我的 number
而不是我的 b-form-select
。因此,我选择了 3 个值并在我的输入字段中获取了一个数字,反之亦然 - 所以它是一个 Autofill.
这工作正常 - 因此我认为我不需要向您展示代码。
问题是我想禁用所有选择(而不是第一个),直到选择了之前的字段。
我有一个问题,如果我有多个元素,所有元素都会被更新。因此,如果我在第一个元素的 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>
您缺少的是数据的 multi-layer 模型,您可以在 searchNumber
函数中调用它并调用 :disabled
属性。
在您的 v-for="(IDChild, indexChild) in inputs"
中,您可以使用 IDChild
或 indexChild
。例如,您会调用 :disabled="disabledInput2[indexChild]"
。这样你就可以用特定的 indexChild
.
来引用 disabledInput2
你也需要在你的函数中处理这个,例如this.disabledInput2[indexChild] = false;
。
基本上这与将 multi-layer 数据存储在与 v-model
相同的 object 中是一样的。
编辑: 一般示例
我为此示例创建了以下属性。我们将 myNumberInput
作为 object 来处理数字的多个输入字段。 mySelectionData
提供了两个 object 的简单集合,每个有 3 个选择数组。 myDisableData
是 object,它将处理此选择的多个 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
object,我们将使用此函数构建我们的 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})
});
});
}
这将循环遍历我们的“parents”,将它们的 index
分配给 myDisableData
,同时循环遍历“childs”并将它们的 index
到 myDisableData
以“parent”-index
作为指针。之后我们有一个 multi-layer object 可以为每个选择提供 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 看起来不一样,但我想你会明白的。您现在只需通过“parent”和“child”的 index
来引用三个 object。在此示例中,函数 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,它将启用第二个块中的第一个选择。
正如我所说,这只是一个一般示例,但这应该足以帮助您定义结构来处理您的多个输入和选择。
我正在与 BootstrapVue
合作。
我有以下问题。我有一个 b-form-input
,我在其中搜索我的 number
而不是我的 b-form-select
。因此,我选择了 3 个值并在我的输入字段中获取了一个数字,反之亦然 - 所以它是一个 Autofill.
这工作正常 - 因此我认为我不需要向您展示代码。
问题是我想禁用所有选择(而不是第一个),直到选择了之前的字段。
我有一个问题,如果我有多个元素,所有元素都会被更新。因此,如果我在第一个元素的 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>
您缺少的是数据的 multi-layer 模型,您可以在 searchNumber
函数中调用它并调用 :disabled
属性。
在您的 v-for="(IDChild, indexChild) in inputs"
中,您可以使用 IDChild
或 indexChild
。例如,您会调用 :disabled="disabledInput2[indexChild]"
。这样你就可以用特定的 indexChild
.
disabledInput2
你也需要在你的函数中处理这个,例如this.disabledInput2[indexChild] = false;
。
基本上这与将 multi-layer 数据存储在与 v-model
相同的 object 中是一样的。
编辑: 一般示例
我为此示例创建了以下属性。我们将 myNumberInput
作为 object 来处理数字的多个输入字段。 mySelectionData
提供了两个 object 的简单集合,每个有 3 个选择数组。 myDisableData
是 object,它将处理此选择的多个 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
object,我们将使用此函数构建我们的 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})
});
});
}
这将循环遍历我们的“parents”,将它们的 index
分配给 myDisableData
,同时循环遍历“childs”并将它们的 index
到 myDisableData
以“parent”-index
作为指针。之后我们有一个 multi-layer object 可以为每个选择提供 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 看起来不一样,但我想你会明白的。您现在只需通过“parent”和“child”的 index
来引用三个 object。在此示例中,函数 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,它将启用第二个块中的第一个选择。
正如我所说,这只是一个一般示例,但这应该足以帮助您定义结构来处理您的多个输入和选择。