存储数据与展示数据不同时的处理方法

在开发表单中,常常遇到存储的表单数据与显示给用户的内容不一致的情况。

例如一个多选组件,表单数据中存储的是选择项的id,但是显示给用户的却是选择项的名称。

对于这种情况,有两种处理方法。

第一种是使用计算属性显示

根据存储的数据id,查找对应的名称,再先是到表单上。

使用的是计算属性,要确保不能修改它。

如果要将名称显示到输入框组件上,可以加上disabled防止用户修改它。

第二个是使用查找方法,实时查找

编写一个根据id查找名称的方法,然后在渲染过程中使用它,类似:

<ul>
  <li>{{getNameById(item.id)</li>
</ul>