Just starting my Vue journey and encountering a slight challenge.
Displayed below is a table with various items:
Whenever an item is selected and its quantity increased, I need my addOptional method (optional) to update a variable with the item's quantity concatenated with its code. For example, if I select a hammer, it should look like this `
let variable = optional.Qty + 'x' + optional.Code
If I were to console.log the result, it would appear as 2x1
Now, if I choose another option, let's say Saw, I would need to append the new choice to the existing variable separated by a Pipe ( | ). For example, it should look like this.
2x1 | 1x2
How can I achieve this? Would using an array be the best approach?
Here's what I have so far:
new Vue({
el: '#app',
data() {
return {
Optionals: [
{ Code: 1, Name: 'Hammer', Value: 50.00, Qty: 0 },
{ Code: 2, Name: 'Saw', Value: 50.00, Qty: 0 },
{ Code: 3, Name: 'Nail', Value: 60.00, Qty: 0 }
]
}
},
methods: {
addOptional(optional) {
// The variable below should receive the value of the quantity plus the code. If more than one option is chosen the variable must receive this new value and separate with pipe example Qty (2) x Code (2) | Qty (3) x Code (2)
optional.Qty += 1;
let Code = [optional.Qty + 'x' + optional.Code];
},
remove(optional) {
}
}
})<script src="https://unpkg.com/vue"></script>
<div id="app">
<template>
<div class="user-list">
<table>
<thead>
<tr>
<th>#Code</th>
<th>Name</th>
<th>Unit Value</th>
<th>Total Value</th>
</tr>
</thead>
<tbody>
<tr v-for="optional in Optionals" :key="optional.Code">
<td>
<button @click="optional.Qty ? optional.Qty-- : false">-</button>
<input type="text" :value="optional.Qty">
<button @click="addOptional(optional)">+</button>
</td>
<td>{{ optional.Name }}</td>
<td>{{ optional.Value }}</td>
<td>{{ optional.Value * optional.Qty }}</td>
</tr>
</tbody>
</table>
</div>
</template>
</div>