How do I access values of dynamic textboxes in vue.js

Question

I'm generating this vue template dynamically based on previously selected options, So depending on the number of check boxes a user selects from a previous step, I generate this template.

  <template  v-for="(items, index) in appliedPortfolioItems">
<div>
    <h5> {{items.displayName}} {{items.availableBalance}}</h5>
    <div class="row">
        <p>{{items.coreSystemOption}}</p>

        <div class="col s6">
            <h6>Eligible Loan Amount</h6>
            <h4>{{items.allowedAmount}}</h4>
        </div>

        <div class="col s6">
            <h6>Enter Required Loan Amount</h6>
            <div class="input-field">
                <input type="text">
            </div>
        </div>
    </div>
</div>
</template>

Please how do I access the value entered in each textbox via a v-model. For more context, the user needs to be able to enter a loan amount on every account they have chosen from previous step.

score 0 · Answer 1 · answered Jan 10 '21 at 16:44

0

You should have a prop in items object to store a text entered in a input box. That way you can setup v-model for input tag like this:

<div class="input-field">
  <input type="text" v-model="items.userInput">
</div>

answered Jan 10 '21 at 16:44

Anatoly

20,799
3
28
42

score 0 · Answer 2 · answered Jan 10 '21 at 17:41

First, you'll need to declare a "inputs" array on your data in script section.

import Vue from 'vue';

export default {
  // For demonstration purpose only. For props, always use object syntax
  props: ['bar'], // bar is an array passed down to the component
  data() {
    return {
      inputs: []
    }
  }
}

Then, go for it in the template section

<div v-for="(foo, index) in bar">
  <input type="text" v-model="inputs[index]" />
</div>

Working example

new Vue({
    el: '#app',
    data: () => ({
        inputs: []
    })
});

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>
  <div id="app">
    <input type=text v-model="inputs[0]" />
    <div> First input is {{ inputs[0] }} </div>
    
    <input type=text v-model="inputs[1]" />
    <div> Second input is {{ inputs[1] }} </div>
  </div>
</body>

How do I access values of dynamic textboxes in vue.js

2 Answers2

Working example