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

相关推荐
YU大宗师几秒前
React面试题
前端·javascript·react.js
木兮xg1 分钟前
react基础篇
前端·react.js·前端框架
ssshooter25 分钟前
你知道怎么用 pnpm 临时给某个库打补丁吗?
前端·面试·npm
IT利刃出鞘1 小时前
HTML--最简的二级菜单页面
前端·html
yume_sibai1 小时前
HTML HTML基础(4)
前端·html
给月亮点灯|2 小时前
Vue基础知识-Vue集成 Element UI全量引入与按需引入
前端·javascript·vue.js
知识分享小能手2 小时前
React学习教程,从入门到精通,React 组件生命周期详解(适用于 React 16.3+,推荐函数组件 + Hooks)(17)
前端·javascript·vue.js·学习·react.js·前端框架·vue3
面向星辰2 小时前
html音视频和超链接标签,颜色标签
前端·html·音视频
lxh01132 小时前
LRU 缓存
开发语言·前端·javascript