使用Vuelidate时如何为$v.emaill.$model设置默认v-model值

嘿，我刚好也遇到过类似的问题！其实Vuelidate的$v.emaill.$model本质是和你组件里对应的emaill属性双向绑定的，所以要设置默认值，核心就是给这个emaill属性初始化时赋值为你计算属性里的email值就行。

下面是具体的实现步骤和修改后的代码：

1. 初始化数据源并赋值默认值 #

首先，你的组件里需要有emaill这个数据属性（Vuelidate的验证规则是基于组件的data/props的），然后在组件创建阶段把计算属性的email赋值给它：

export default {
  data() {
    return {
      emaill: '' // 先初始化空字符串
    }
  },
  computed: {
    // 假设你的计算属性是这样从状态中获取email的
    email() {
      return this.profile.email
    }
  },
  created() {
    // 组件创建时，把计算属性的email设为emaill的初始值
    this.emaill = this.email
  },
  validations: {
    emaill: {
      email,
      required,
      // 换成箭头函数保证this指向组件实例（默认情况下this是Vuelidate的验证上下文）
      isUnique: (value) => {
        if (_.isEmpty(value)) {
          return false;
        }
        // 如果输入值和当前用户邮箱一致，直接返回有效
        if (this.profile.email === value){
          return true;
        }
        // 否则调用接口检查邮箱是否已被占用
        return api.auth.emailTaken({ email: value });
      }
    }
  }
}

2. 输入框代码保持不变 #

你的HTML代码不需要修改，$v.emaill.$model会自动同步emaill的初始值：

<input class="form-control" v-model="$v.emaill.$model" type="text">

额外提醒：响应式同步（可选） #

如果你的计算属性email是响应式的（比如用户信息更新时会变化），可以加个watch监听，在需要的时候同步到输入框：

watch: {
  email(newEmail) {
    // 可以加个判断，比如只有输入框未被手动修改过才同步
    if (this.emaill === this.email) {
      this.emaill = newEmail
    }
  }
}

这样设置后，输入框一开始就会显示你计算属性里的email值，同时还能正常使用Vuelidate的验证功能～

内容的提问来源于stack exchange，提问作者Dave