Vue.js计算器try catch实现问题：ERR与计算结果未正确输出

修复方案 #

问题根因 #

1. 计算成功分支的this.output = eval(this.expression)代码被注释，计算结果没有赋值给输出变量，自然无法渲染到指定位置
2. 模板中表达式{{expression}}和输出{{output}}直接并排书写，没有做分隔布局，导致不管是错误提示还是计算结果都会直接跟在表达式末尾，视觉上看起来是追加效果

具体修改 #

1. 修正=号触发的计算逻辑

else if (but == "=") {
    try {
        // 取消注释，将计算结果赋值给output
        this.output = eval(this.expression)
    } catch (error) {
        this.output = "ERR"
    }
}

2. 调整展示模板，分隔表达式和输出区域

<div class="row border m-3 text-right" style='height:100px;'>
    <div class="col d-flex flex-column justify-content-between">
        <!-- 表达式区域 -->
        <div style="font-size: 16px; color: #666; padding-top: 8px;">{{expression}}</div>
        <!-- 输出/错误区域 -->
        <div style="font-size: 28px; font-weight: 500; padding-bottom: 8px;">{{output}}</div>
    </div>
</div>

可选优化 #

如果需要按下等号得到结果后，再按数字自动开启新一轮计算，可以在action方法的开头补充逻辑：

action(but) {
    // 已有输出的情况下，按数字或小数点自动清空历史
    if (this.output && /[0-9.]/.test(but)) {
        this.expression = ''
        this.output = ''
    }
    // 原有逻辑不变
    console.log(but)
    // ... 剩下的原有代码
}

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