Vant中List组件immediate-check=false无效的解决

下面将详细讲解“Vant中List组件immediate-check=false无效的解决”的完整攻略。

问题描述

使用Vant中的List组件时，通过设置immediate-check属性为false，期望不立即校验表单，但实际情况是，无论怎么设置immediate-check属性，表单都会立即被校验。

解决方法

方案一：升级Vant版本

该问题在Vant的1.x版本中存在，而在2.x版本中已经被解决了，因此首先建议升级Vant版本。

具体升级过程为，先卸载旧版本的Vant：

npm uninstall vant

然后安装2.x版本的Vant：

npm install vant@2.0.0-beta.6

在升级完Vant版本后，再次设置immediate-check属性为false，测试可以通过。

方案二：手动修改Vant源码

如果不想升级Vant版本，可以通过手动修改Vant源码来解决问题。

在Vant的List组件源码中（路径为vant/lib/list/index.js），找到watch钩子函数中的以下代码：

if (this.immediateCheck) {
  this.check();
}

将其替换为：

if (this.immediateCheck && this.ready) {
  this.check();
}

这样修改后，immediate-check属性就能够生效了。需要注意的是，手动修改Vant源码有可能会导致其他问题，建议谨慎使用。

示例说明

示例一

假设我们有一个表单，要求输入姓名和年龄，并使用Vant的List组件来实现。代码如下：

<van-list>
  <van-field v-model="name" label="姓名" required></van-field>
  <van-field v-model="age" label="年龄" required></van-field>
  <van-button type="primary" @click="submit">提交</van-button>
</van-list>

我们希望在用户输入或点击提交按钮时才进行表单校验，因此设置了immediate-check属性为false：

<van-list immediate-check="false">
  <van-field v-model="name" label="姓名" required></van-field>
  <van-field v-model="age" label="年龄" required></van-field>
  <van-button type="primary" @click="submit">提交</van-button>
</van-list>

但是发现，无论怎么设置immediate-check属性，表单都会立即被校验。通过以上的解决方法，我们可以轻松解决该问题。

示例二

假设我们有一个Vue组件，其中包含一个Vant的List组件，代码如下：

<template>
  <van-list ref="list" immediate-check="false">
    <van-field v-model="name" label="姓名" required></van-field>
    <van-field v-model="age" label="年龄" required></van-field>
    <van-button type="primary" @click="submit">提交</van-button>
  </van-list>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      age: ''
    }
  },
  methods: {
    submit() {
      this.$refs.list.validate(valid => {
        if (valid) {
          // 表单校验通过，提交表单
        } else {
          // 表单校验不通过，提示用户
        }
      });
    }
  }
}
</script>

我们使用Vant的List组件来实现表单校验，并设置了immediate-check属性为false，但发现表单仍然会立即被校验，无法满足需求。通过以上的解决方法，我们可以轻松解决该问题。