vue界面，用vant组件，给3个van-field（分别是性别，城市，入学年份） 添加弹出选择并且返回值到文本中，请写出代码

以下是示例代码，可供参考：

<template>
  <van-field v-model="gender" label="性别" readonly @click="showGenderPicker" />
  <van-field v-model="city" label="城市" readonly @click="showCityPicker" />
  <van-field v-model="enrollmentYear" label="入学年份" readonly @click="showYearPicker" />
</template>

<script>
import { Picker } from 'vant';

export default {
  components: {
    [Picker.name]: Picker,
  },
  data() {
    return {
      gender: '',
      city: '',
      enrollmentYear: '',
      genderOptions: ['男', '女'],
      cityOptions: [
        { text: '北京', value: '北京' },
        { text: '上海', value: '上海' },
        { text: '广州', value: '广州' },
        { text: '深圳', value: '深圳' },
      ],
      yearOptions: ['2020', '2019', '2018', '2017', '2016'],
    };
  },
  methods: {
    showGenderPicker() {
      Picker({
        title: '请选择性别',
        columns: [
          {
            values: this.genderOptions,
          },
        ],
        onConfirm: (value) => {
          this.gender = value[0];
        },
      });
    },
    showCityPicker() {
      Picker({
        title: '请选择城市',
        columns: [
          {
            values: this.cityOptions,
          },
        ],
        onConfirm: (value) => {
          this.city = value[0];
        },
      });
    },
    showYearPicker() {
      Picker({
        title: '请选择入学年份',
        columns: [
          {
            values: this.yearOptions,
          },
        ],
        onConfirm: (value) => {
          this.enrollmentYear = value[0];
        },
      });
    },
  },
};
</script>