带v-for的动态v-模型 [英] Dynamic v-model with v-for
本文介绍了带v-for的动态v-模型的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个v-for循环,该循环将吐出多行输入,我想将每一行分别动态地保存到数组对象中.
I have a v-for loop that is going to spit out multiple rows of inputs that I would like to save each separate row to an array object dynamically.
v-for:
<table class="table m-0">
<tbody>
<tr v-for="fund in defaultFunds">
<td>
{{fund.name}}
<b-input v-model="newEntries[fund.id]['id']"
:value="fund.id"
name="entryFund"
type="text"
class="d-none"
:key="fund.id" />
</td>
<td>
<b-input v-model="newEntries[fund.id]['amount']"
name="newFundAmount"
id="newFundAmount"
type="text"
placeholder="Amount"
:key="fund.id"/>
</td>
</tr>
</tbody>
</table>
所需的数组(以输入2行为例):
Desired array (using example of entering 2 rows):
newEntries: [
{ id: '1', amount: '50.00' },
{ id: '2', amount: '123.45' }
],
默认情况下,我将newEntries
加载为空数组.我不知道如何用v-for获得想要的数组对象.有了上面的代码,我最终得到了这一点:
I load newEntries
as an empty array by default. I don't know how to get the kind of array object I want with v-for. With the above code I end up with this:
newEntries: [null, '50.00', '123.45']
我在做什么错了?
推荐答案
您想要这样的东西吗?
https://jsfiddle.net/e6L5seec/
<div id="app">
newEntries: {{ newEntries }}
<table>
<tr v-for="(fund, index) in defaultFunds">
<td>{{ fund.name }}</td>
<td>
<input v-model="newEntries[index].id"
name="entryFund"
:value="fund.id"
type="text" />
</td>
<td>
<input v-model="newEntries[index].amount"
name="entryFund"
type="text" />
</td>
</tr>
</table>
</div>
new Vue({
el: "#app",
data: function() {
return {
defaultFunds: [
{
id: 0,
name: 'fund 0'
},
{
id: 1,
name: 'fund 1'
}
],
newEntries: [{}, {}]
}
},
methods: {
}
});
这篇关于带v-for的动态v-模型的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文