VueJS计算器仅单次运行问题求助及代码排查

问题说明 #

开发的Vue计算器仅能正常运行一次：例如计算6×3可得到18，但清除结果后输入3×2，数字会拼接成32而非执行运算，必须刷新页面才能恢复。

错误根源 #

1. 方法名与变量名冲突：原代码中precedente既是方法名，又被赋值为存储前一个数字的变量，直接覆盖了方法本身，导致第二次点击运算符时无法调用该方法重置状态。
2. 未声明响应式状态变量：precedente、operatore未在data中声明，属于Vue实例的临时属性，状态管理混乱。
3. 清除方法不彻底：原cancella仅清空了当前显示数字，未重置cliccato、运算符等状态，残留状态影响后续运算。
4. 等于逻辑存在冗余：uguale方法中operazione相关逻辑未被正确触发，运算后未重置输入状态。

修复后的完整代码 #

HTML代码（无改动） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calcolatrice</title>
    <link rel="stylesheet" type="text/css" href="Calcss.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="icon" href="Cal.png">
    <link href="https://fonts.googleapis.com/css2?family=Belanosima:wght@600&family=Pangolin&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div class="Tittolo">
        <div class="barra"> 
            <h1>DraCanculator</h1>
        </div>
    </div>
    <div class="tutto">
        <div id="app">
            <div id="calcolatri">
                <div id="schermo">{{numCorrente}}</div>
                    <div @click="segno" class="btn">-/+</div>
                    <div @click="percento" class="btn">%</div>
                    <div @click="log" class="btn">log</div>
                    <div @click="cancella" class="btn operatore">C</div>
                    <div @click="inserici(7)" class="btn">7</div>
                    <div @click="inserici(8)" class="btn">8</div>
                    <div @click="inserici(9)" class="btn">9</div>
                    <div @click="divisione" class="btn operatore">÷</div>
                    <div @click="inserici(4)" class="btn">4</div>
                    <div @click="inserici(5)" class="btn">5</div>
                    <div @click="inserici(6)" class="btn">6</div>
                    <div @click="moltiplica" class="btn operatore">x</div>
                    <div @click="inserici(1)" class="btn">1</div>
                    <div @click="inserici(2)" class="btn">2</div>
                    <div @click="inserici(3)" class="btn">3</div>
                    <div @click="resta" class="btn operatore">-</div>
                    <div @click="inserici(0)" class="btn">0</div>
                    <div @click="puntoop" class="btn">.</div>
                    <div @click="uguale" class="btn operatore">=</div>
                    <div @click="suma" class="btn operatore">+</div>
            </div>
        </div>
            <div id="ciao">
                <img :src="ci" alt="Cipheros Img." style="width: 50px; border-radius: 10px; box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);"/>
                <p style="font-size: 10px;">
                Made by Cipheros.
                </p>
            </div>
    </div> 
<script src="CalJs.js"></script>  
<script>
    new Vue ({
        el: "#ciao",
        data: {
            ci: 'Cipheros.png'
        },  
    });
</script>  
</body>
</html>

CSS代码（无改动） #

body {
    background-color: #2c2929;
    color: white;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-family: 'Belanosima', sans-serif;
    font-family: 'Pangolin', cursive; 
}
.barra {
    background-color: rgb(57, 165, 105);;
    padding: 1px 0;
    margin-top: 2.5%;
    margin-bottom: 3%;
}
h1{
    font-size: 40px;
}
.tutto {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin-left: 40px;
    gap: 15px;
}
#calcolatri {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(40px, auto);
    width: 80vh;
    text-align: center;
    font-size: 30px;
    margin: 10px auto;
    background-color: #595757;
    border-radius: 10px;
}
#schermo{
    display: grid;
    grid-column: 1/5;
    margin-bottom: 5%;
    align-items: center;
    text-align: center;
    justify-content: center;
    
}
.btn {
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    margin: 1.5px;
    background-color: #807d7d;
}
.operatore{
background-color: mediumseagreen;
}
#ciao{
    gap: 1px;
}

修复后的VueJS代码 #

new Vue ({
    el: '#calcolatri',
    data:{
        numCorrente: '',
        operazione: '',
        cliccato: false,
        numeroPrecedente: '', // 重命名变量，避免与方法名冲突
        operatore: null // 初始化运算符为响应式属性
    },
    methods:{
        inserici(numero){
            if (this.cliccato){
                this.numCorrente = '';
                this.cliccato = false;
            } 
            this.numCorrente = `${this.numCorrente}${numero}`;
        },
        cancella(){
            // 重置所有运算状态
            this.numCorrente = '';
            this.numeroPrecedente = '';
            this.operatore = null;
            this.cliccato = false;
            this.operazione = '';
        },
        segno() {
            this.numCorrente = this.numCorrente.charAt(0) === '-' ?
                this.numCorrente.slice(1) : `-${this.numCorrente}`;
        },
        puntoop(){
            if (this.numCorrente.indexOf('.') === -1){
                this.inserici('.');
            }
        },
        percento(){
            this.numCorrente = `${parseFloat(this.numCorrente) / 100 }`;
        },
        log(){
            this.operazione = `log(${this.numCorrente})`;
            this.numCorrente = `${Math.log(parseFloat(this.numCorrente))}`;
            this.cliccato = true; // 计算后允许输入新数字
        },
        salvaNumeroPrecedente(){
            // 重命名方法，避免与变量冲突
            this.numeroPrecedente = this.numCorrente;
            this.cliccato = true;
        },
        moltiplica(){
            this.operatore = (a, b) => a * b;
            this.salvaNumeroPrecedente();
        },
        suma(){
            this.operatore = (a, b) => a + b;
            this.salvaNumeroPrecedente();
        },
        resta(){
            this.operatore = (a, b) => a - b;
            this.salvaNumeroPrecedente();
        },
        divisione(){
            this.operatore = (a, b) => a / b;
            this.salvaNumeroPrecedente();
        },
        uguale(){
            if (!this.operatore || !this.numeroPrecedente) return;
            
            const risultato = this.operatore(
                parseFloat(this.numeroPrecedente),
                parseFloat(this.numCorrente)
            );
            this.numCorrente = `${risultato}`;
            // 保留结果支持连续运算，同时允许输入新数字
            this.numeroPrecedente = risultato;
            this.cliccato = true;
        }
    }
});

关键修改点 #

• 重命名precedente方法为salvaNumeroPrecedente，并在data中声明numeroPrecedente变量存储前一个数字，解决方法与变量名冲突问题。
• 在data中初始化operatore为null，作为响应式属性统一管理。
• 完善cancella方法，重置所有运算状态，确保清除后计算器回到初始状态。
• 优化uguale方法逻辑，增加空值判断，运算后保留结果支持连续运算，同时设置cliccato为true，允许输入新数字。
• 给log方法添加this.cliccato = true，确保计算后可以正常输入新数字。

内容的提问来源于stack exchange，提问作者Fabrizzio Machado