首页 > 其他分享 >Vant之日期选择BUG修复

Vant之日期选择BUG修复

时间:2024-04-12 10:24:51浏览次数:30  
标签:const Vant onCalenderConfirm value currentComp date BUG 修复

我连续使用两个Vant的日期组件,但是选中第一个日期组件的结果显示到第二个日期组件上了,HTML代码为:

<div
  v-if="item.type === 'date' && !item.allowShowYearAndMonth"
  class="time"
>
  <van-field
    :label="item.label"
    v-model="mainFormState[item.prop]"
    is-link
    readonly
    :placeholder="item.placeholder || '点击选择'"
    @click="showCalendar = true"
    label-class="timeLabel"
    :required="item.isConfigRequired"
  />
  <van-calendar
    v-model:show="showCalendar"
    :min-date="minDate"
    :max-date="maxDate"
    @confirm="(date) => onCalenderConfirm(date, item)"
  />
</div>

JS为:

const onCalenderConfirm = (date, item) => {
  mainFormState.value[item.prop] = dayjs(date).format("YYYY-MM-DD");
  showCalendar.value = false;
};

修改为:

<div
  v-if="item.type === 'date' && !item.allowShowYearAndMonth"
  class="time"
>
  <van-field
    :label="item.label"
    v-model="mainFormState[item.prop]"
    is-link
    readonly
    :placeholder="item.placeholder || '点击选择'"
    @click="
      showCalendar = true;
      currentComp = item;
    "
    label-class="timeLabel"
    :required="item.isConfigRequired"
  />
  <van-calendar
    v-model:show="showCalendar"
    :min-date="minDate"
    :max-date="maxDate"
    @confirm="onCalenderConfirm"
  />
</div>

JS为:

const currentComp = ref("");

const onCalenderConfirm = (date) => {
  mainFormState.value[currentComp.value.prop] = dayjs(date).format("YYYY-MM-DD");
  currentComp.value = "";
  showCalendar.value = false;
};

即可。

标签:const,Vant,onCalenderConfirm,value,currentComp,date,BUG,修复
From: https://www.cnblogs.com/luoyihao/p/18130611

相关文章

  • 一个bug引发的Android分区存储的思考
    **问题:**在安卓手机上实现保存图片的功能,部分手机保存失败。报了如图一的错误: 根据报错信息是没有权限,但仔细在代码内检查是有申请到存储权限的,并且该功能在其他手机上没问题**实现流程:**仔细看我们的实现流程如图二所示: 整个过程看上去都没问题。但是在出现问题的手机上,使......
  • 记录真实项目中遇到的bug--007:排序展示bug
    T07:排序展示bug:1.优先级:T22.前提条件:用户A打开日历3.预期结果:日历行程展示按照业务提供的sort顺序进行排序。4.实际结果:日历行程展示的时间段在9点之前的顺序不符合预期。5.缺陷跟踪:后端按照sort字段排序,更改为9点之前的时间段前面加0,例如原先的9:45,改为09:45,后达到预期......
  • mongoDB宕机修复
    1.删除mongo路径下/data/mongod.lock2.删除mongo路径下/data/storage.bson3.加载数据库文件路径,或者使用配置文件--configxxx/config.conf/www/server/mongodb/bin/mongod--bind_ip0.0.0.0--dbpath/www/server/mongodb/data加入systemctl1./usr/lib/systemd/system2.......
  • 52 Things: Number 13: Outline the use and advantages of projective point represe
    52Things:Number13:Outlinetheuseandadvantagesofprojectivepointrepresentation.52件事:第13件:概述投影点表示的用途和优点。 Thisisthelatestinaseriesofblogpoststoaddressthelistof '52ThingsEveryPhDStudentShouldKnow' todoCryptogr......
  • ARM DS-5 断点设置及常用Debug 命令
    1.1DS-5Debug方法梳理通常在调试过程中需要打断点来进行单步调试,这个时候可以按照下面步骤来进行:在使用DS-5Debug之前需要先load所编译的elf文件: 设置好路径:1.2.1DS-5设置断点Debug在上面完成elf文件的load及路径设置后,我们就可以使用DS-5进行设置断......
  • 在Intellij IDEA中使用Debug
    Debug用来追踪代码的运行流程,通常在程序运行过程中出现异常,启用Debug模式可以分析定位异常发生的位置,以及在运行过程中参数的变化。通常我们也可以启用Debug模式来跟踪代码的运行流程去学习三方框架的源码。所以学习下如何在IntellijIDEA中使用好Debug,主要包括如下内容:......
  • Nacos 2.3.2 正式发布,修复重大 bug!
    大家好,我是R哥。Nacos2.3.2前几天正式发布了,修复了一个重大bug。Nacos先扫个盲:Nacos一个用于构建云原生应用的动态服务发现、配置管理和服务管理平台,由阿里巴巴开源,致力于发现、配置和管理微服务。说白了,Nacos就是充当微服务中的的注册中心和配置中心。推荐一个开源......
  • 零基础开发uni-app 小兔鲜儿 项目及bug记录(上)
    零基础开发uni-app小兔鲜儿项目及bug记录(上)文档食用指南心很挣扎,是要复制官方文档然后再上面基础上进行修改来写这篇博客还是什么(这样从头到尾只要打开我这一个网页即可)想了想,还是算了,就对官方文档做个补充吧。......
  • linux 修复ntfs磁盘,安装和使用NTFSfix(安装Ntfs-3g),以在Linux上修复Windows硬盘驱动
    本文介绍在Linux系统中安装和使用NTFSfix(安装Ntfs-3g)的方法,支持Ubuntu、Debian、ArchLinux、Fedora、OpenSUSE,使用它可以在Linux上修复不工作的Windows硬盘驱动器。你是否有运行NTFS文件系统的dirtyWindows硬盘驱动器,遇到问题并且不想重新启动到Windows?如果是这样,别担心,使用......
  • 修复Win11更新后Type-C耳机无声的问题
    环境超市随便买的不知名Type-C耳机电脑:华硕天选3系统:windows1123H2问题之前一直使用这副耳机,但是有一次更新之后,忽然没有声音了,华硕天选3是有连个type-c接口的,反复试了都不行,今天有空再试了一下,歪打正着修复过程首先检查音频输出设备是否选择了耳机没有问题后,去扬......