带有 v-for 的动态 v-model

Posted 2023-02-23

【中文标题】带有 v-for 的动态 v-model

【英文标题】：Dynamic v-model with v-for

【发布时间】：2018-11-03 18:18:20

【问题描述】：

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

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行为例）：

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

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

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

我做错了什么？

【问题讨论】：

<tr v-for="fund in defaultFunds" :key="fund.id"> 密钥应该在这里，而不是b-input

【参考方案1】：

你想要这样的东西吗：

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: 
  
);

【讨论】：

就是这样，我实际上尝试过，但编译后，我在控制台中收到 javascript 错误，说无法读取未定义的属性 'id'；但在我的 vue 检查器中，defaultFunds 是最明确定义的

defaultFunds的id是从1开始的吗？如果是，则会出现错误。您需要改用newEntries[fund.id + 1].id

defaultFunds ids 可以是任何大于 0 的整数。我有一个 axios 调用将它们从数据库中拉出，因此它可以从 1 到无穷大。它不会总是以 1 开头，我需要对它做同样的事情吗？

如果是这种情况，您应该使用v-for="(fund, index) in defaultFunds"。我已经更新了我的答案。

谢谢@ittus！这正是我想要的。