2021-01-11 工作记录--Wechat applet-＜van-picker＞得到的是[Object Object]

<van-picker>得到的是[Object Object]

一、前言

最近做的一个微信小程序项目中，需实现一个请假类型选择器弹窗，我就借助vant-weapp中的<van-popup></van-popup>和<van-picker/>来分别实现弹窗和选择器滴，wxml代码如下：

<!-- 请假类型弹窗 -->
<van-popup round position="bottom" custom-style="height: 50%;overflow:hidden;" show="{{ isShowType }}" bind:close="closeType">
  <!-- 请假类型选择器 -->
  <van-picker show-toolbar="true" title="请假类型" columns="{{ leaveType }}" value-key="title" bind:cancel="closeType" bind:confirm="confirmType"/>
</van-popup>

二、问题分析

But，在接后台数据时，却发现前端页面上展示的内容是[Object Object]，见下图：

这时，我就打印了一下后台传过来的数据leaveType，见下图：

这才发现了问题所在：👇🏻

我们本应展示的是数据leaveType里的title，这里我们却直接将数据leaveType渲染到了页面，固然就展示成了 比如{id: 1, title: "事假"}这种形式，自然就得到的是[Object Object]了

三、解决方法

So，找到突破口后，我就认真查看文档，找到了一个配置参数value-key，见下图：

那我们就直接配置该参数 value-key=“title” 就好啦，见下图：

四、最终结果：

bingo~搞定啦😄