I am currently working on a Vue template that dynamically creates Bootstrap text inputs. The goal is to allow the user to retrieve the values onSubmit from these inputs.
One requirement I have is to disable an input if the length of the text exceeds 10 characters. I have been struggling with this problem since yesterday and any assistance would be greatly appreciated.
<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();
},
checkInputLength(pInputValues) {
if (pInputValues.length > 80) {
console.log("Limited Exist");
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