<template>
  <div class="calculator">
    <h2>Taschenrechner</h2>
    <form @submit.prevent>
      <div>
        <input type="number" v-model.number="zahl1" />
      </div>
      <div>
        <input type="number" v-model.number="zahl2" />
      </div>
      <div class="buttons">
        <button type="button" @click="calculate('add')">Add</button>
        <button type="button" @click="calculate('sub')">Sub</button>
        <button type="button" @click="calculate('mult')">Mult</button>
        <button type="button" @click="calculate('div')">Div</button>
      </div>
    </form>
    <p>Ergebnis: {{ ergebnis }}</p>
  </div>
</template>

  <script>
  export default {
    name: 'CalcComp',
    data() {
      return {
        zahl1: 0,
        zahl2: 0,
        ergebnis: 0,
      };
    },

    methods: {
      calculate(typ) {
        switch (typ) {
          case 'add':
            this.ergebnis = this.zahl1 + this.zahl2;
            break;
          case 'sub':
            this.ergebnis = this.zahl1 - this.zahl2;
            break;
          case 'mult':
            this.ergebnis = this.zahl1 * this.zahl2;
            break;
          case 'div':
            this.ergebnis = this.zahl2 !== 0 ? this.zahl1 / this.zahl2 : 'Fehler';
            break;
        }
      },
    },
  };
  </script>