在开发表单中,常常遇到存储的表单数据与显示给用户的内容不一致的情况。
例如一个多选组件,表单数据中存储的是选择项的id,但是显示给用户的却是选择项的名称。
对于这种情况,有两种处理方法。
第一种是使用计算属性显示
根据存储的数据id,查找对应的名称,再先是到表单上。
使用的是计算属性,要确保不能修改它。
如果要将名称显示到输入框组件上,可以加上disabled防止用户修改它。
第二个是使用查找方法,实时查找
编写一个根据id查找名称的方法,然后在渲染过程中使用它,类似:
<ul>
<li>{{getNameById(item.id)</li>
</ul>