<template>
<h2>Taschenrechner</h2>
<form v-on:submit.prevent>
<input type="number" v-model="num1">
<br/> 
<input type="number" v-model="num2">
<br/>
<button type="button" v-on:click="setOperation('add')">Add</button>
<button type="button" v-on:click="setOperation('subtract')">Sub</button>
<button type="button" v-on:click="setOperation('multiply')">Mult</button>
<button type="button" v-on:click="setOperation('divide')">Div</button>
</form>
<p>Ergebnis: {{ result }}</p>
</template>

<script>

import { ref, computed } from 'vue';

export default {
setup() {
const num1 = ref(0);
const num2 = ref(0);
const operation = ref('add');
const result = computed(() => {
const n1 = parseFloat(num1.value);
const n2 = parseFloat(num2.value);

switch (operation.value) {
case 'add':
return n1 + n2;
case 'subtract':
return n1 - n2;
case 'multiply':
return n1 * n2;
case 'divide':
return n2 !== 0 ? n1 / n2 : '∞';
default:
return 0;
}
});

function setOperation(op) {
operation.value = op;
}

return {
num1,
num2,
result,
operation,
setOperation,
};
},
};
</script>

<style></style>