vant picker confirm事件

背景：

页面中表单中有多项点击弹出的picker且picker columns值不同，点击picker确定按钮给相对应的变量赋值。开始想的是给confirm传入不同的参数，发现传参之后原本的value失效。于是就想用ref下的title来实现

问题：

点击确认按钮时设置对应v-model变量变量值

解决方法：

根据 refs 来获取组件的title值给变量赋值

 

相应代码：

<template>
  <div class="apply_dialog">
    <van-form>
      <van-field
        readonly
        clickable
        ref="loanUseRef"
        label="贷款用途"
        :value="applyForm.loanUse"
        placeholder="请选择贷款用途"
        @click="handleShowPicker('loanUse')"
      />
      <van-field
        readonly
        clickable
        label="所属区域"
        ref="areaRef"
        :value="applyForm.area"
        placeholder="请选择所属区域"
        @click="handleShowPicker('area')"
      />
      <van-field
        readonly
        clickable
        label="所属行业"
        ref="industryRef"
        :value="applyForm.industry"
        placeholder="请选择所属行业"
        @click="handleShowPicker('industry')"
      />

    </van-form>
    <van-popup
      v-model="showPicker"
      round
      position="bottom"
    >
      <van-picker
        show-toolbar
        ref="pickerRef"
        :title="pickerTitle"
        :columns="pickerColumns"
        @cancel="showPicker = false"
        @confirm="onConfirmPicker"
      />
    </van-popup>
  </div>

</template>

<script>
export default {
  data() {
    return {
      showPicker: false,
      pickerColumns: [],
      applyForm: {
        loanUse: '',
        area: '',
        industry: ''
      },
      areaList: [
        {
          text: '太原',
          value: '01'
        },
        {
          text: '大同',
          value: '02'
        }
      ],
      areaList: [
        {
          text: '太原',
          value: '01'
        },
        {
          text: '大同',
          value: '02'
        }
      ],
      loanUse: [
        {
          text: '购车',
          value: '04'
        },
        {
          text: '购房',
          value: '05'
        }
      ],
      industryList: [
        {
          text: '农业',
          value: 'A'
        },
        {
          text: '采矿业',
          value: 'B'
        },
        {
          text: '制造业',
          value: 'C'
        }
      ],
      pickerTitle: ''
    }
  },
  methods: {
    handleShowPicker(val) {
      this.showPicker = true
      if (val == 'loanUse') {
        this.pickerColumns = this.comData.loanUse
        this.pickerTitle = '贷款用途'
      } else if (val == 'industry') {
        this.pickerColumns = this.comData.industryList
        this.pickerTitle = '所属行业'
      } else {
        this.pickerColumns = this.areaList
        this.pickerTitle = '所属地区'
      }
    },
    onConfirmPicker(values) {
      if (this.$refs.pickerRef.title == '贷款用途') {
        this.applyForm.loanUse = values.text
      } else if (this.$refs.pickerRef.title == '所属行业') {
        this.applyForm.industry = values.text
      } else {
        this.applyForm.area = values.text
      }
      this.showPicker = false
    }
  }
}
</script>

<style>
</style>

实现效果：