I am attempting to add an element to an array without deleting other content, and it seems very straightforward... Array.push()
My issue is that I am utilizing ref([]) and I have read that I can use ref.value.push = newItem
However, the problem is that it overrides my previous content. I need the user to select a checkbox with information, and this information should be added to my table. To achieve this, I'm implementing:
<input type="checkbox" :id="item.id" :name="item.name" :data-category="item.category.name" style="font-size: 0.6em; transform: scale(1.6);" @change="addToCart($event)"/>
and my function addToCart():
const addItemCart = ref([])
const addToCart = (event) => {
let itemId = event.target.id
let itemName = event.target.name
let category = event.target.getAttribute("data-category")
var newItem = new Array();
newItem = [{ id: itemId, name: itemName, category: category }];
addItemCart.value = newItem
}
I tried using:
const addItemCart = ref([])
const addToCart = (event) => {
let itemId = event.target.id
let itemName = event.target.name
let category = event.target.getAttribute("data-category")
var newItem = new Array();
newItem = [{ id: itemId, name: itemName, category: category }];
addItemCart.value.push = newItem
console.log(addItemCart.value)
}
This returns:
Proxy(Array) {push: Array(1)}
[[Handler]]:Object
[[Target]]: Array(0)
push: Array(1)
0: {id: '96', name: 'DESINCRUSTADOR DCALUXE - HIDROCAL ELECTRONICO', category: 'ARTICULOS B'}
length: 1
[[Prototype]]: Array(0)
length: 0
[[Prototype]]: Array(0)
[[IsRevoked]]: false
app.js:20948
Proxy(Array) {push: Array(1)}
[[Handler]]: Object
[[Target]]: Array(0)
push: Array(1)
0: {id: '281', name: 'DCALUXE PRO 2.0 DESINCRUSTADOR ELECTRONICO', category: 'ARTICULOS B'}
length: 1
[[Prototype]]: Array(0)
length: 0
[[Prototype]]: Array(0)
[[IsRevoked]]: false
The data is not being pushed into my array and I cannot display it in my table. I have the following code for looping through:
<tr v-for="item in addItemCart" :key="item">
<td>{{ item }}</td>
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.category }}</td>
<td><i class="fa fa-trash" aria-hidden="true" @click="removeItem($event)"></i></td>
</tr>
My question is, how can I add items to my array without deleting my other content?
Thank you for reading and sorry for my poor English.