Vue .js v-on:input how to pass parameters(inputted value and the index) to a computed property

Question

I have two arrays.

1. items

   items: [ ["Malibana", "23", "Vanila"], ["Munchee", "34", "Chocalate"], ["Little", "23", "Stobery"] ]

2. items2

   items: [ ["Malibana", "23", "Vanila"], ["Munchee", "34", "Chocalate"], ["Little", "23", "Stobery"] ]

then I loop items array in my component

    <ul>
    <li v-for="(item,index) in items" :key="index">
      <input v-on:input="process(index)" type="text">{{item}}
    </li>
  </ul>

then some one input a value inside a input field process computed property calls to add 3rd element for the items2 array.

My question is this isn't pass the index. it passes a vue component as well as how to I pass the inputted value to the computed property.

Answer 1

You can use $event to pass the inputted value to process and then you can push it to items. Also, I would use v-one:change instead of v-on:input, because v-on:input calls process for every key press and I don't think that is something you want.

<ul>
    <li v-for="(item,index) in items" :key="index">
        <input v-on:change="process($event,index)" type="text">{{item}}
    </li>
</ul>

And now we can push it

methods: {
    process(event, index){
        this.items[index].push(event.target.value);
    }
}