How can I use v-model to assign values in 2D array?

Question

I want to assign values to 2D array by using v-model.

Here's my array of objects :

[
  {
    first_attribute_value: 'red',
    second_attribute_value: 'meduim',
    third_attribute_value: 'cotton',
    quantity: [
      { location_id: 32, quantity: '' },
      { location_id: 31, quantity: '' },
      { location_id: 30, quantity: '' },
      { location_id: 1, quantity: '' },
    ],
  },
  {
    first_attribute_value: 'red',
    second_attribute_value: 'meduim',
    third_attribute_value: 'leather',
    quantity: [
      { location_id: 32, quantity: '' },
      { location_id: 31, quantity: '' },
      { location_id: 30, quantity: '' },
      { location_id: 1, quantity: '' },
    ],
  },
],

and thats my function that return the testvar array :

 setVariancesJSON(){
           this.firstattrs.forEach(first=>{
             if(this.secondattrs.length && this.thirdattrs.length){
            this.secondattrs.forEach(second=>{
            this.thirdattrs.forEach(third=>{
            this.testvar.push({
            first_attribute: this.attrnames[0],
            first_attribute_value: first,
            second_attribute: this.attrnames[1],
            second_attribute_value: second,
            third_attribute: this.attrnames[2],
            third_attribute_value: third,
            quantity:this.freeProductQuantity
                     })
                 })
             })
             }
             else if(this.secondattrs.length && !this.thirdattrs.length){
                 this.secondattrs.forEach(second=>{
                     this.testvar.push({
            first_attribute: this.attrnames[0],
            first_attribute_value: first,
            second_attribute: this.attrnames[1],
            second_attribute_value: second,
            third_attribute: null,
            third_attribute_value:null,
            quantity:this.freeProductQuantity
                     })
                 })
             }
             else{
                   this.testvar.push({
            first_attribute: this.attrnames[0],
            first_attribute_value: first,
            second_attribute:null,
            second_attribute_value: null,
            third_attribute: null,
            third_attribute_value:null,
            quantity:this.freeProductQuantity
                     })
             }

         })
     }

I wanted to assign values to quantity attribute in each quantity array

I tried this :

<tr v-for="(attr,index) in testvar " :key="index">
  <td class="col-2 text-center" v-for="(warehouse,index2) in warehouses" :key="index2">
    <input v-model="testvar[index].quantity[index2].quantity">
  </td>
</tr>

But it reflects the same numbers in all input fields for each column, like it always reads "[index]" with the same value in each iteration.

Answer 1

Please take a look at following snippet (index2 was wrong):

new Vue({
  el: '#demo',
  data() {
    return {
      testvar: [{"first_attribute_value": "red", "second_attribute_value": "meduim", "third_attribute_value": "cotton", "quantity": [{"location_id": 32, "quantity": "5" }, {"location_id": 31, "quantity": ""}, {"location_id": 30, "quantity": ""}, {"location_id": 1, "quantity": ""}]}, {"first_attribute_value": "red", "second_attribute_value": "meduim", "third_attribute_value": "leather", "quantity": [{"location_id": 32, "quantity": ""}, {"location_id": 31, "quantity": "7"}, {"location_id": 30, "quantity": ""}, {"location_id": 1, "quantity": ""}]}]
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <table>
    <tr v-for="(attr, index) in testvar " :key="index"> 
      <td class="col-2 text-center" v-for="(warehouse, index2) in attr.quantity" :key="index2"> 
        {{ warehouse.location_id }}
        <input v-model="testvar[index].quantity[index2].quantity"> 
      </td> 
    </tr>
  </table>
  <p>{{ testvar }}</p>
</div>

Answer 2

Not sure what is warehouses. You should perform second iteration on quantity array inside each object of testvar.

Working Demo :

const app = new Vue({
  el: '#app',
  data() {
    return {
      testVar: []
    }
  },
  methods: {
    getData() {
      this.testVar.push({
          first_attribute_value: 'red',
          second_attribute_value: 'meduim',
          third_attribute_value: 'cotton',
          quantity: [
            { location_id: 32, quantity: '' },
            { location_id: 31, quantity: '' },
            { location_id: 30, quantity: '' },
            { location_id: 1, quantity: '' },
          ],
        },
        {
          first_attribute_value: 'red',
          second_attribute_value: 'meduim',
          third_attribute_value: 'leather',
          quantity: [
            { location_id: 32, quantity: '' },
            { location_id: 31, quantity: '' },
            { location_id: 30, quantity: '' },
            { location_id: 1, quantity: '' },
          ],
        }) 
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="getData()">Get Data</button>
  <table>
    <tr v-for="(attr,index) in testVar" :key="index">
      <td class="col-2 text-center" v-for="(warehouse,index2) in attr.quantity" :key="index2">
        <input v-model="testVar[index].quantity[index2].quantity">
      </td>
    </tr>
  </table>
</div>