页面不更新千万不要忽视控制台的报错

「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」

前言

今天是接手离职人员代码的一天，临近提测，发现还有很多功能没有实现！！！其中有一个搜索方式的切换，试了各种方式页面就是不更新，后来把控制台报错屏蔽掉就好用了！！！绝

功能点

如上图所示，选中左边的搜索条件，右边置灰同时输入框有对应默认文字。背后的逻辑控制其实狠简单：

<p id="fd-ajcx-dsr" @click="ajcxClick(0)" :class="{ 'not-active': ajcxActive == 1 }">
    当事人关键字
</p>
<p id="fd-ajcx-ah" @click="ajcxClick(1)" :class="{ 'not-active': ajcxActive == 0 }">
    案号关键字
</p>
<section  v-if="ajcxActive == 0">
    <input  placeholder="请输入当事人关键字…" v-model="dsrSearchInp"></input>
</section>
<section  v-if="ajcxActive == 1">
    <input  placeholder="请输入案号关键字…" v-model="dsrSearchInp"></input>
</section>
 
ajcxClick(type) {
    this.ajcxActive = type
    this.dsrSearchInp = ''
    this.ahSearchInp = ''
},

但是点击触发click事件页面就是纹丝不动，中间尝试了各种方法，其中操作dom的可以实现上边p标签的样式的切换，用到了document.getElementById('fd-ajcx-ah').className = 'not-active',说到这这个样式必须提一下：

p {
    &.not-active {
        color: rgba(122, 126, 139, 1);
        &:first-of-type {
            border-radius: 0px 0px 21px 0px;
            border: 1px solid rgba(220, 220, 220, 1);
        }
        &:last-of-type {
            border-radius: 0px 0px 0px 21px;
            border: 1px solid rgba(220, 220, 220, 1);
        }
    }
}

期间各种调试方法都尝试了，在控制台打印各参数值，在每一个可能的地方打断点，值都是预期的正确的，但是页面就是不渲染不更新。看控制台有报错，想着那个报错的接口跟这个功能点八竿子打不着，就一直没往这里想。后来处理另一个功能点,接口有正确的数值返回，页面不显示的问题。这个时候把报错的接口屏蔽了，然后数据就正常显示了。顺手点切换试了一下发现它好使了！这个深层次的原理暂时还没去研究，但是这个坑必须得先填上。

总结

当控制台有报错时，千万千万不要忽视，改掉这个小小的报错，就能解决好多好多问题！