CODEWITHSUNDEEP
vue.jsvuejs2v-for
margherita pizza
margherita pizza

Reputation: 7145

vue.js how to v-model values as separate arrays

from the backend I'm getting an array like this. enter image description here

then I render this array to a table like this enter image description here

My code

<tr v-for="item in items">
                <td>
                    {{item[1]}}
                </td>
                <td>
                    {{item[2]}}
                </td>
                <td>
                    <input type="text" v-model="grnItems[items[1]]"/>
                </td>
            </tr>

This is a purchase return component

what I want is v-model this each an every input element as a separate array along with the item name.

like this

 [
    ["chicken","12"]
    ["chille","19"]
]

How do I achieve this using vue.js?

Upvotes: 0

Views: 1066

Answers (1)

DobleL
DobleL

Reputation: 3918

Use an auxiliar array with the data populated the way you want, some example using computed properties

new Vue({
  el: '#app',
  data: {
    items: [['1', 'some text', '66'], ['2', 'another text', '12'], ['5', 'random text', '89']],
    result: []
  },
  computed: {
    procesedItems() {
      return this.items.map(i => ({
        id: i[0],
        name: i[1],
        amount: i[2]
      }))
    }
  },
  methods: {
    doSomething() {
      this.result = this.procesedItems.map(i => {
        let aux = [];
        
        aux.push(i.name, i.amount)
        return aux
      })
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app">
  <ul>
    <li v-for="item in procesedItems"> {{item.id }} {{item.name }} <input v-model="item.amount"/></li>
  </ul>
  <button @click="doSomething">Calculate</button>
  {{ result }}
</div>

Upvotes: 1

Related Questions