Pessoal estou iniciando com Vue e estou com uma pequena dificuldade. Na imagem abaixo eu tenho uma tabela com alguns itens
Todas vez que um item é escolhido e aumentado a quantidade eu preciso que no meu método addOpcional(opcional) minha variável receba a quantidade desse item concatenado com o valor. Exemplo se eu escolho martelo ficaria assim
let variavel = opcional.Qtd + 'x' + opcional.Code
Se eu der um console.log o resultado seria 2x1
Porém se eu escolher outro opcional, exemplo Serrote eu devo juntar a primeira escolha nessa mesma variável e separar com Pipe (|) Exemplo ficaria desta forma.
2x1|1x2
Como devo fazer isso? Devo usar array?
Oque já tenho
new Vue({
el: '#app',
data() {
return {
Opcionais: [
{ Code: 1, Nome: 'Martelo', Valor: 50.00, Qtd: 0 },
{ Code: 2, Nome: 'Serrote', Valor: 50.00, Qtd: 0 },
{ Code: 3, Nome: 'Prego', Valor: 60.00, Qtd: 0 }
]
}
},
methods: {
addOpcional(opcional) {
// A variavael abaixo deve receber o valor da quantidade mais o codigo se caso for escolhido mais de um opcional a variavel deve receber esse novo valor e separar com pipe exemplo Qtd(2) x Code(2) | Qtd(3) x Code(2)
opcional.Qtd += 1
let Code = [opcional.Qtd + 'x' + opcional.Code]
},
remove(opcional) {
}
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<template>
<div class="usuario-lista">
<table>
<thead>
<tr>
<th>#Code</th>
<th>Nome</th>
<th>Valor Unitário</th>
<th>Valor Total</th>
</tr>
</thead>
<tbody>
<tr v-for="opcional in Opcionais" :key="opcional.Code">
<td>
<button @click="opcional.Qtd ? opcional.Qtd-- : false">-</button>
<input type="text" :value="opcional.Qtd">
<button @click="addOpcional(opcional)">+</button>
</td>
<td>{{ opcional.Nome }}</td>
<td>{{ opcional.Valor }}</td>
<td>{{ opcional.Valor * opcional.Qtd }}</td>
</tr>
</tbody>
</table>
</div>
</template>
</div>
let variavel = opcional.Qtd + 'x' + opcional.Code
?