I'm new and i want anyone help sum using vuejs-CodePudding

so i'm new using vuejs and i need to make a sum of 2 inputs and 1 select it's a tip calculator, in a restaurant, people will pay like 20$ for their food and they need do a tip on the final payment, if the service quality was good, tip will be 20% of the total value. the first input it's the price, the select it's the tip %, the second input its to you pay alone or share with someone.

Example:
Food: 100$
Service: excelent (tip 30%)
Amount of people paying: 2
So 100 30% / 2 = 130$ total, 65$ each person

I tried a lot of things, but none was working, i just need to learn how to sum, can someone help me?

    export default {
      methods: {
        soma: function() {
          this.items.push({
            valor1: "",
            valor2: "",
            valor3: "",
          })
        };
      },
    }

    <template>
      <main>
        <h1>Calculadora de Gorjetas</h1>
        <li v-for="item in items"><label>Valor da Conta?</label>
        <input type="number" v-model="item.valor1" />
        <label>Como foi o Serviço?</label>
        <select v-model="item.valor2">
          <option value="5">5% (Péssimo)</option>
          <option value="10">10% (Ruim)</option>
          <option value="15">15% (Ok)</option>
          <option value="20">20% (Bom)</option>
          <option value="25">25% (Mais que Bom)</option>
          <option value="30">30% (Perfeito)</option>
        </select>
        <label>Quantas pessoas irão dividir?</label>
        <input type="number" v-model="item.valor3" />
        <h4 id="resultado">Valor da conta: R$ para cada pessoa</h4>
        </li>
      </main>
    </template>

CodePudding user response：

You could bind your data to the html elements and then trigger the calculation for example through a button click.

<template>
  <div>
    <input type="number" v-model="price" />
    <input type="number" v-model="numberOfPersons" />
    <select v-model="selectedTipPercentage">
      <option value="5">5% (Péssimo)</option>
      <option value="10">10% (Ruim)</option>
      <option value="15">15% (Ok)</option>
      <option value="20">20% (Bom)</option>
      <option value="25">25% (Mais que Bom)</option>
      <option value="30">30% (Perfeito)</option>
    </select>
    <button @click="calculate()">Calculate</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      numberOfPersons: 0,
      price: 0,
      selectedTipPercentage: null,
    };
  },
  methods: {
    calculate() {
      const priceWithTip =
        (this.price / 100) * this.selectedTipPercentage   this.price;
      console.log(priceWithTip / this.numberOfPersons);
    },
  },
};
</script>

CodePudding user response：

The point of vue.js is to bind data to your attributes.

This can be done by using the v-model directive on your elements.

Then, to calculate sums, you can use a computed property to calculate the sum of the items and the tip.

You can then divide this result by the number of user to get the sum by user

Here is a small working example

new Vue({
  el: "#app",
  data: () => ({
    apples: 1,
    APPLE_PRICE: 100,
    tip: 0,
    numberOfUser: 1,
  }),
  
  computed: {
    itemsSum(){
      return this.apples * this.APPLE_PRICE * (1   this.tip / 100)
    },
    
    itemsSumPerPerson(){
      return this.itemsSum / this.numberOfUser
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  
  <input v-model="apples" type="number">
  <label>apple ({{APPLE_PRICE}})</label>
  
  <br />
  
  <input v-model="tip" type="number">
  <label>tip (in %)</label>
  
  <br />
  
  
  <label>Number of user :</label>
  <input type="number" v-model="numberOfUser"/>
  
  
  <h2> Sum : {{itemsSum}}</h2>
  <h2> Sum per person : {{itemsSumPerPerson}}</h2>
</div>