小程序下拉选择van-popup+van-picker的坑，给自己备注的怕忘

想实现的效果是

.wxml

<view class="send-item">
        <van-cell title="车辆颜色" is-link bind:click="showColor" name="color_id">{{ colorsChose }}</van-cell>
        <van-popup show="{{ colorIn }}" bind:close="closeColor" position="bottom" custom-style="height: 50%">
            <van-picker show-toolbar columns="{{ colors }}"  value-key="name" bind:confirm="onConfirm" bind:cancel="onCancel"/>              
        </van-popup>
    </view>

.js

data: {
    //车辆颜色'
    colorIn: false,
    colors: '',
    colors_id: 0,
    colorsChose: '',
  },
  //汽车颜色
  showColor() {
    this.setData({ colorIn: true });
  },
  closeColor() {
    this.setData({ colorIn: false });
  },
  onConfirm(event) {
    this.setData({
      colors_id: event.detail.value.id,
      colorsChose: event.detail.value.name,
      colorIn: false
    });
    //console.log(this.data.colors_id + this.data.colorsChose)
  },
  onCancel() {
    this.setData({ colorIn: false });
  },
  //获取汽车属性
  getAttribute: function () {
    let that = this;
    app.api.car.getAttribute().then(res => {
      that.setData({
        colors: res.data.colors,
      })
      //console.log(this.data.colors)
    });
  },

.json

"usingComponents": {
    "van-field": "@vant/weapp/field/index",
    "van-cell": "@vant/weapp/cell/index",
    "van-cell-group": "@vant/weapp/cell-group/index",
    "van-popup": "@vant/weapp/popup/index",
    "van-picker": "@vant/weapp/picker/index"
  }

备注：
show-toolbar：下拉弹窗的取消和确定按钮的显示，不写不显示
value-key=“name”：数组数据的name值，不写下拉弹窗显示[Object,Object]
参考：参考的是地区联动，给我的提示很大，感谢