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

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,因为我想获取的是选择的这个对象,不是这个对象里面的某个属性

相关推荐
mCell1 天前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip1 天前
Node.js 子进程:child_process
前端·javascript
excel1 天前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel1 天前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼1 天前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙1 天前
[译] Composition in CSS
前端·css
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 天前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript