javascript - Vue.js:如何连接 v-model 值

Question

如何让它工作:

<div v-for="index in 4">
  <input v-model="'invoice_' + index" >
</div>

就像这样:

<div v-for="index in 4">
  <input v-model="invoice_1" >
</div>

Answer 1

如果将所有 invoices_ 变量放在一个对象中，然后按键引用它们，可能会更好，如下所示:

new Vue({
  el: '#app',
  data: {
    invoices: {
      invoice_1: '1',
      invoice_2: '2',
      invoice_3: '3',
      invoice_4: '4'
    }
  }
})

<script src="https://unpkg.com/vue@2.5.3/dist/vue.js"></script>

<div id="app">
  <div v-for="index in 4">
    <input v-model="invoices['invoice_' + index]">
  </div>
</div>