0

у меня есть две 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

1 ответ 1

1

Нужно result сделать вычисляемой.

<p>click Result: {{ result }}</p>
<p>Auto Result: {{ num1 +' '+ selected +' '+ num2 +' = '+ result }}</p>
methods: {
  sum() {
    return parseInt(this.num1) + parseInt(this.num2);
  }
},
computed: {
  result: function() {
    switch(this.selected){
      case '+':
        return this.sum();
      ... // добавить варианты для других действий
    }
  }
}
4
  • мне нужно добавить methods например с именем minus и там провисать минус и в computed сделать case '+': return this.sum(); case '-': return this.minus();
    – korvon
    Commented 16 нояб. 2023 в 9:30
  • Виктор Карев, я редактировал свой вопрос можете посмотреть мой код пожалуйста
    – korvon
    Commented 16 нояб. 2023 в 10:27
  • 1
    1. Уберите result из data() - теперь result будет вычисляемым свойством. 2. sum() и minus() должны не присваивать result, а просто возвращать результат через return. Commented 16 нояб. 2023 в 12:19
  • Виктор Карев, спасибо за помощь
    – korvon
    Commented 16 нояб. 2023 в 15:25

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.