How to merge properties JavaScript objects

Question

I'm starting with Vue and I'm having a little difficulty.

In the image below I have a table with some items:

Every time an item is chosen and the amount increased I need that in my addOptional method (optional) my variable gets the amount of that item concatenated with the value. Example if I choose hammer would look like this `

let variavel = opcional.Qtd + 'x' + opcional.Code

If I give console.log the result would be 2x1

But if I choose another option, example Serrote I should join the first choice in that same variable and separate with Pipe ( | ) Example would look like this.

2x1 | 1x2

How should I do this? Should I use array?

What I already have:

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) {
      // 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)
      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>

Answer 1

This seems like a perfect use case for a computed property:

computed: {
  Code: function () {
    return this.Opcionais
      .filter( opcional => opcional.Qtd > 0 )
      .map( opcional => opcional.Qtd + 'x' + opcional.Code )
      .join( ' | ' );
  }
}

Here's a full working example, showing the code below the table and updating it live:

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 }
      ]
    }
  },
  computed: {
    Code: function () {
      return this.Opcionais
        .filter( opcional => opcional.Qtd > 0 )
        .map( opcional => opcional.Qtd + 'x' + opcional.Code )
        .join( ' | ' );
    }
  }
})

<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 > 0 && opcional.Qtd--">-</button>
              <input type="text" v-model.number="opcional.Qtd">
              <button @click="opcional.Qtd++">+</button>
            </td>
            <td>{{ opcional.Nome }}</td>
            <td>{{ opcional.Valor }}</td>
            <td>{{ opcional.Valor * opcional.Qtd }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <p>Code: {{Code}}</p>
  </template>
</div>

Answer 2

Not really familiar with Vue but you can reduce Opcionais like so:

const 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 }
];

const result = Opcionais.reduce((arr, { Qtd, Code }) => {
  return [...arr, `${Qtd}x${Code}`];
}, []).join(' | ');

console.log(result);