Level 25
You can create a tuple of (item, index) in your v-for which will give you access to the index of the specific item in the array:
<div v-for="(item, index) in items" :key="item.id">
1 like
Hi All,
I have the following code in Vue:
<script setup>
import {computed, ref} from 'vue'
const newItem = {itemId: '', qty: 0, price: 0.00, batches: []}
const items = ref([{...newItem, ...{id: 0}}])
const addItem = () => {
items.value.push({...newItem, ...{id: items.value.length}})
}
</script>
<template>
<button @click="addItem" type="button">Add Item</button>
<div v-for="item in items" :key="item.id">
<input name="itemId[]" type="text" placeholder="Item..." v-model="items[item.id].itemId">
</div>
</template>
where I have v-model="items[item.id].itemId" is there a simpler way to update the items array by just using the index of the array, rather than me having to create an id using .length?
Please or to participate in this conversation.