[Vuejs]-How do I access values of dynamic textboxes in vue.js

by

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>

0👍

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>

Leave a comment