嵌套循环到 v-model Vue JS
Nested loop to v-model Vue JS
我想在嵌套循环中使用 v-model 从输入中收集数据,但不知道该怎么做,因为我是 Vue 新手。
这是组件的代码:
<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>
任何人都可以帮助我如何为这种情况创建 v-model 和数据变量?
与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>
我想在嵌套循环中使用 v-model 从输入中收集数据,但不知道该怎么做,因为我是 Vue 新手。
这是组件的代码:
<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>
任何人都可以帮助我如何为这种情况创建 v-model 和数据变量?
与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>