带有 v-for 的动态 v 模型 [英] Dynamic v-model with v-for

问题描述

我有一个 v-for 循环，它将吐出多行输入，我想将每个单独的行动态保存到数组对象中.

v-for:

<tr v-for="fund in defaultFunds"><td>{{基金名称}}<b-input v-model="newEntries[fund.id]['id']":value="fund.id"名称=入场基金"类型=文本"类=d-无":key="fund.id"/></td><td><b-input v-model="newEntries[fund.id]['amount']"名称=新基金金额"id="新基金金额"类型=文本"占位符=金额":key="fund.id"/></td></tr></tbody>

所需数组(以输入2行为例):

newEntries: [{ id: '1', 金额: '50.00' },{ ID:'2'，金额:'123.45'}],

我默认加载 newEntries 作为一个空数组.我不知道如何使用 v-for 获得我想要的那种数组对象.使用上面的代码，我最终得到了这个:

newEntries: [null, '50.00', '123.45']

我做错了什么?

解决方案

你想要这样的东西:

https://jsfiddle.net/e6L5seec/

新条目:{{ 新条目 }}<表格><tr v-for="(fund, index) in defaultFunds"><td>{{fund.name }}</td><td><input v-model="newEntries[index].id"名称=入场基金":value="fund.id"类型=文本"/></td><td><input v-model="newEntries[index].amount"名称=入场基金"类型=文本"/></td></tr>
新的 Vue({el: "#app",数据:函数(){返回 {默认资金:[{编号:0，名称:'基金0'},{编号:1，名称:'基金1'}],新条目:[{}, {}]}},方法: {}});

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>

Desired array (using example of entering 2 rows):

newEntries: [
  { id: '1', amount: '50.00' },
  { id: '2', amount: '123.45' }
],

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']

What am I doing wrong?

解决方案

Do you want something like this:

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屋！