Level 63
Your approach is strange.
You should have a structure like this one.
-
a batches component with an array of batches and a function to add a new batch add(newBatch)
-
batch component to display a batch and which accepts a batch props
Aug 9, 2024
6
Level 14
Vue: Pushing to object containing array is updating ALL arrays
I declare an items object like so:
const newItem = {itemId: '', price: '0.00', discount: 0, discountedPrice: 0, batches: [2]}
const items = ref([{...newItem, ...{id: 0}}])
And I want to be able to push a new member to the batches key:
const addItem = () => {
items.value.push({...newItem, ...{id: items.value.length}})
}
const addBatch = (batches) => {
console.log(batches)
batches.push(0)
}
But when I call addBatch from the template, it is updating all of the batches on every item:
<tr v-for="(item, index) in items" :key="item.id" class="bg-slate-200">
<td class="p-1 text-center align-top">
<input :name="'itemId[' + index + ']'"
type="text"
placeholder="Item..."
v-model="item.itemId"
class="rounded border border-gray-500 text-gray-900 p-1 w-full text-xs min-w-[100px]"
>
</td>
<td class="p-1 text-center align-top">
<div class="grid grid-cols-2">
<div>
<input v-for="(batch, batchIndex) in item.batches"
:key="batchIndex + 'batch'"
:name="'quantity[' + index + '][]'"
:value="batch"
type="number"
placeholder="Quantity..."
min=".001"
max="1000000000"
step=".001"
class="rounded border border-gray-500 text-gray-900 p-1 text-xs w-full"
>
</div>
<div>
<button @click="addBatch(item.batches)" //////// HERE
type="button"
class="text-xs bg-green-600 flex p-1 items-center rounded text-white ml-1"
>
I've tried everything but I can't get my head around why all of the batches are being updated instead of just the one being passed to the function?
Level 14
@vincent15000 a separate component for an input box just seems a bit overkill to me, i don't know
1 like
Level 63
@JackJones Oh sorry I just understand that you need to add several batches from several input fields.
Ok no I understand.
function addBatch(batches) {
batches.push(0); // this has no sense ... batches are those you want to add to the array
// perhaps this ?
items.value.push(batches);
}
Level 47
item.batches
means all batches .... that is why
1 like
Level 63
@MaverickChan I you look at the code, item.batches are the batches written in the form.
Level 21
I think you would want to give addBatch the index variable and then look for the correct item in the array.
const addBatch = (index) => {
console.log(items[index].batches)
items[index].batches.push(0)
}
<button @click="addBatch(index)"
type="button"
class="text-xs bg-green-600 flex p-1 items-center rounded text-white ml-1"
>
1 like
Please or to participate in this conversation.