javascript - 如何合并属性JavaScript对象

我从Vue开始，但遇到了一些困难。

在下图中，我有一个包含一些项目的表格:

每次选择一个项目并增加数量时，我都需要在addOptional方法(可选)中，我的变量将该项目的数量与值连接在一起。如果我选择锤子，示例将如下所示:

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

如果我给console.log结果将是2x1

但是，如果我选择另一个选项(例如Serrote)，则应该将第一个选择加入该相同变量中，并用Pipe(|)分隔，示例看起来像这样。

2x1 | 1x2

我应该怎么做？我应该使用数组吗？

我已经拥有的:

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>

最佳答案

这似乎是computed property的完美用例:

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

这是一个完整的工作示例，在表下方显示代码并实时更新:

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>