Skip to content
Advertisement

Vue.js: How to concatenate v-model value

How to make this work:

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

just like this:

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

Advertisement

Answer

It could be better if you put all the invoices_s variables in a single object and then refer to them by key, something like follows:

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>
User contributions licensed under: CC BY-SA
4 People found this is helpful
Advertisement