Vant 4中的van-picker选择总是第一个的解决办法

MaoSource2023-08-26 22:48

Vant 4中的van-picker选择总是第一个的解决办法

官方demo

javascript 复制代码

<van-field
  v-model="fieldValue"
  is-link
  readonly
  label="城市"
  placeholder="选择城市"
  @click="showPicker = true"
/>
<van-popup v-model:show="showPicker" round position="bottom">
  <van-picker
    :columns="columns"
    @cancel="showPicker = false"
    @confirm="onConfirm"
  />
</van-popup>
import { ref } from 'vue';

export default {
  setup() {
    const columns = [
      { text: '杭州', value: 'Hangzhou' },
      { text: '宁波', value: 'Ningbo' },
      { text: '温州', value: 'Wenzhou' },
      { text: '绍兴', value: 'Shaoxing' },
      { text: '湖州', value: 'Huzhou' },
    ];
    const fieldValue = ref('');
    const showPicker = ref(false);

    const onConfirm = ({ selectedOptions }) => {
      showPicker.value = false;
      fieldValue.value = selectedOptions[0].text;
    };

    return {
      columns,
      onConfirm,
      fieldValue,
      showPicker,
    };
  },
};

渲染出来的结果是这样的

这个使用起来是没啥问题的

他默认是渲染text,但是一般在我们使用中99%的数据渲染都不可能是text,这个时候就可以使用文档中的columns-field-names来自定义自定义 columns 结构中的字段，比如我们的数据里面现在是name为需要渲染的字段就可以这么写

javascript 复制代码

<van-picker
        :columns-field-names="{ text: 'name'}"
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      >
</van-picker>

但是这个时候就会发现一个问题，就是不管你怎么选择都是第一个选项，因为我也是个前端小白，找了蛮久都没找到解决办法，后来试了一下自定义value居然可以，所以就可以写成

javascript 复制代码

:columns-field-names="{ text: 'name', value: 'name' }"

这样就可以了，也不知道为啥，看不懂源码

为啥一开始不自定义value,因为我想获取的是选择的这个对象，不是这个对象里面的某个属性