How to merge properties of Javascript objects

Question

Personal I am starting with Vue and I am with a small difficulty. In the image below I have a table with some items

Every time an item is chosen and increased the amount I need my addOptional (optional) method to receive 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 a console.log the result would be 2x1

But if I choose another optional, Serrote example I must join the first choice in the same variable and separate with Pipe (|) Example would look this way.

2x1|1x2

How should I do this? Should I use array?

What have I got

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>

Answer 1

You can use string arrays or concatenation.

An example with array would be:

• for each partial: [1, 3].join('x') that gives 1x3
• to join the partials: [[1, 3].join('x'), [2, 3].join('x')].join('|') that gives 1x3|2x3

An example would be like this:

new Vue({
  el: '#app',
  data() {
    return {
      codes: '',
      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) {

      opcional.Qtd += 1

      this.codes = this.opcionais
        .filter(({Qtd}) => Qtd > 0)
        .map(({Qtd, Code}) => {
          return [Qtd, Code].join(' x ');
        }).join(' | ');
    },

    remove(opcional) {

    }
  }
})

table {
  border-collapse: collapse;
}

table,
td,
th {
  border: 1px solid grey;
  padding: 5px;
}

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></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>
        <p>{{codes}}</p>
    </div>
</template>
</div>