前言:
在项目开发中,通过v-if遍历数据时,将===写成了=,导致将后台返回来的正确数据全部复制成自己代码里写的那个数值,所以最后结果就是无论后台接口返回什么值,前端页面现实的都是我代码对应的中文。
1.错误代码:
<el-table-column
label="监控标识">
<template slot-scope="scope">
<div>
<span v-if="scope.row.monitor_flag='0'">未监控</span>
<span v-else-if="scope.row.monitor_flag='1'">已监控</span>
<span v-else>{{scope.row.monitor_flag}}</span>
</div>
</template>
</el-table-column>
上边代码将===写成了=,所以在判断后台返回的到底是0还是1的时候,就已将它赋值成了0,导致错误发生!!
2.正确代码:
<el-table-column
label="监控标识">
<template slot-scope="scope">
<div>
<span v-if="scope.row.monitor_flag==='0'">未监控</span>
<span v-else-if="scope.row.monitor_flag==='1'">已监控</span>
<span v-else>{{scope.row.monitor_flag}}</span>
</div>
</template>
</el-table-column>
刚开始以为组件传值出了问题,毕竟是从其父组件的父组件传过来的,用watch深度监听,打印的也和后台返回的不一致,这才导致我以为是数据监听那出了问题,问了同事,给我检查半天,后来终于发现是因为这个低级错误,我顿时尴尬至极......
记录一下,纯粹是提醒自己不要粗心大意.....
毕竟上次麻烦同事看了半天也是因为马虎,改了接口字段,但遍历时忘改了,导致怎么弄数据就是不出来,再一再二不再三,所以下次一定要好好检查代码。