1

Pessoal estou iniciando com Vue e estou com uma pequena dificuldade. Na imagem abaixo eu tenho uma tabela com alguns itens inserir a descrição da imagem aqui

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>

1
  • Qual o objetivo disso: let variavel = opcional.Qtd + 'x' + opcional.Code? Commented 10/09/2019 às 2:41

1 Resposta 1

1

Podes usar arrays ou concatenação de strings.

Um exemplo com array seria:

  • para cada parcial: [1, 3].join('x') que dá 1x3
  • para juntar os parciais: [[1, 3].join('x'), [2, 3].join('x')].join('|') que dá 1x3|2x3

Um exemplo seria assim:

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>

1
  • 1
    Obrigado, era exatamente isso e ficou bem fácil de entender
    – Henrique
    Commented 10/09/2019 às 13:57

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .