Динамическая v-модель с v-for - PullRequest
Новая
       15

Динамическая v-модель с v-for

0 голосов
/ 24 мая 2018

У меня есть цикл 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-для.С помощью приведенного выше кода я получаю следующее: 

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

Что я делаю не так?

1 Ответ

0 голосов
/ 24 мая 2018

Хотите что-то вроде этого:

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: {
  }
});
...