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

Question

I have the following Vue template which creates Bootstrap text inputs dynamically. The user can get the values onSubmit from the inputs.

Now, I need to disable an input if the text length is over 10 chars. I am struggling with it since yesterday. Any help is more than welcome

 <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

Create disabledInputs: [] array in your reactive data

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

Add :disabled="disabledInputs.includes(`input_${iItem}`)" to your b-form input attributes

<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>

Pass the index to you check method

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

Add index to disabled array

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

Working example:

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