如果长度超过一定数量的字符(VUE.JS)，则禁用已动态创建的某些文本输入

Question

我有以下Vue模板，它动态创建Bootstrap文本输入。用户可以从输入中获取onSubmit的值。

现在，如果文本长度超过10个字符，我需要禁用输入。从昨天开始我就一直在纠结。欢迎任何帮助

<script>
export default {
data() {
return {
items: [],
inputsAmount: 0,
form: [],
disableInput: false
};
},
methods: {
addInput() {
let theNumberOfInputs = this.inputsAmount++;
if (theNumberOfInputs < 8) {
this.items.push({ value: theNumberOfInputs });
} else {
return;
}
},
getFormsInputs() {
let theFormsInputs = {}, theQuestionnaire = [], overLimit = false;
console.log(this.form);
if (this.form.length) {
this.form.forEach((inputValues, iInputValues) => {
theFormsInputs["answer" + (iInputValues + 3)] = inputValues;
overLimit = this.checkInputLenght(inputValues);
});
}
console.log(overLimit);
if(!overLimit){ theQuestionnaire.push(theFormsInputs); }
return theQuestionnaire;
},
submit() {
const theQuestionnaire = this.getFormsInputs();
},
checkInputLenght(pInputValues) {
if (pInputValues.length > 80) {
console.log("Limited Excist");
this.disableInput = true;
return true;
}
}
}
};
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<div>
<b-container>
<b-row class="mt-2" v-for="(item, iItem) in items" :key="iItem">
<b-form-input v-model="form[iItem]" placeholder="Please, type your answer."></b-form-input>
</b-row>
<button @click="addInput()">Test</button>
<button @click="submit()">Submit</button>
<button @click="resetState()">Reset</button>
</b-container>
</div>
</template>

<script>
//TODO CHECK FOR HOW TO PASS DATA

Answer 1

在响应数据中创建disabledInputs: []数组

data() {
return {
items: [],
inputsAmount: 0,
form: [],
disabledInputs: []
};
},

将:disabled="disabledInputs.includes(`input_${iItem}`)"添加到b-form输入属性

<b-row class="mt-2" v-for="(item, iItem) in items" :key="iItem">
<b-form-input v-model="form[iItem]" placeholder="Please, type your answer." :disabled="disabledInputs.includes(`input_${iItem}`)"></b-form-input>
</b-row>

将索引传递给您的检查方法

this.form.forEach((inputValues, iInputValues) => {
theFormsInputs["answer" + (iInputValues + 3)] = inputValues;
overLimit = this.checkInputLenght(inputValues, iInputValues); //here
});

为禁用数组添加索引

checkInputLenght(pInputValues, idx) {
if (pInputValues.length > 10) {
this.disabledInputs.push(`input_${idx}`); // add to array
return true;
}
},

工作的例子:

https://codesandbox.io/s/silly-forest-pmxd8?file=/src/App.vue