Search code examples
javascriptloopsvue.jsv-forv-model

Nested loop to v-model Vue JS


I want to collect the data from input with v-model on nested loop, but idk how to do it cause i'm new in Vue.
Here's the code for the component :

        <div
            class="date-item"
            v-for="(day,index) in dateList"
        >
          <div class="mt-4">
            <div class="form-group">
              <ul class="list-task">
                <li v-for="(n,n_key) in 10" :key="n_key">
                  <base-input
                      :id="'input-text'+n"
                      :type="'text'"
                      :disabled="day.isPastDay"
                  />
                </li>
              </ul>
            </div>
          </div>
        </div>

Anyone can help how i created a v-model and data variable for this case ?

Solution

  • With v-model="day.inputs[n_key]"

    new Vue({
      el: '#app',
      data: () => ({
        dateList: [{
          isPastDay: false,
          inputs: []
        }]
      })
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.14/vue.min.js"></script>
    
    <div id="app">
      <div class="date-item" v-for="(day,index) in dateList">
        <div class="mt-4">
          <div class="form-group">
            <ul class="list-task">
              <li v-for="(n,n_key) in 10" :key="n_key">
                <input type="text" v-model="day.inputs[n_key]" :disabled="day.isPastDay" />
              </li>
            </ul>
          </div>
        </div>
      </div>
      
      <pre>{{ dateList }}</pre>
    </div>