у меня есть две edit там вводятся цифры
и один select там есть плюс, минус, умножение и деление
вопрос заключается в том как мне сделать чтобы при выборе +, -, *, / сумма была верной
например в methods и computed между двумя edit поставил +
this.result = parseInt(this.num1) + parseInt(this.num2);
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Основы Vue</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<!-- <link rel='stylesheet' href='theme.css'>-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h3>Vue Кальк</h3>
<!--<div v-if="num1.length > 0">-->
<label for="num1"> number 1:</label>
<input type="text" id="num1" v-model="num1">
<div :style="{color: 'darkred' }">{{ message }}</div>
<br>
<label for="num2"> number 2:</label>
<input type="text" id="num2" v-model="num2">
<br>
<label>choose:</label>
<label>
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
</label>
<span>Выбрано: {{ selected }}</span>
<br>
<button @click="sum">button</button>
<p>click Result: {{ result }}</p>
<p>Auto Result: {{ num1 +' '+ selected +' '+ num2 +' = '+ result }}</p>
<!--</div>-->
<div v-if="num1.length < 0 ">Цифр пока нет. Добавьте первую</div>
</div>
<script type="module">
const app = Vue.createApp({
data() {
return {
num1: 0,
num2: 0,
result: 0,
message: '',
selected: '+',
options: [
{ text: 'Плюс', value: '+' },
{ text: 'Минус', value: '-' },
{ text: 'Умножение', value: '*' },
{ text: 'Диление', value: '/' }
]
}
},
methods: {
sum() {
this.result = parseInt(this.num1) + parseInt(this.num2);
},
minus() {
this.result = parseInt(this.num1) - parseInt(this.num2);
},
},
computed: {
result: function() {
switch(this.selected){
case '+':
return this.sum()
case '-':
return this.minus()
}
}
},
watch: {
num1(value) {
if (value.length > 5 ){
this.num1 = '0'
this.message = 'должно быть меньше 5 цифр'
// console.log('input value change', value);
}
},
num2(value) {
if (value.length > 5 ){
this.num2 = '0'
this.message = 'должно быть меньше 5 цифр'
// console.log('input value change', value);
}
}
}
});
app.mount('#app');
</script>
</body>
</html>
Прошу Вас не судить строго я только начинаю изучать Vue