首页 > 其他分享 >vue 使用i18n 实现中英文切换 表单校验提示不更新问题

vue 使用i18n 实现中英文切换 表单校验提示不更新问题

时间:2022-11-23 14:22:06浏览次数:53  
标签:insight vue required 表单 trigger blur i18n message true

在用i18n实现中英文切换的时候,出现了在表单中校验不更新的问题,尝试多种方式无果,下面这个方法值得一试。可轻松解决此问题。

data(){ ruleInline: { userName: [ { required: true, message:this.$t("insight.form.AccountEmpty"), trigger: ["change", "blur"] } ], password: [ { required: true, message:this.$t("insight.form.passwordEmpty"), trigger: ["change", "blur"] } ], identify: [{ required: true, message:this.$t("verificationCode"), trigger: "blur" }]
  } }
methods: {
    aaa() {
      this.ruleInline = {
        userName: [
          {
            required: true,
            message: this.$t("insight.form.AccountEmpty"),
            trigger: ["change", "blur"]
          }
        ],
        password: [
          {
            required: true,
            message: this.$t("insight.form.passwordEmpty"),
            trigger: ["change", "blur"]
          }
        ],
        identify: [{ required: true, message: this.$t("verificationCode"), trigger: "blur" }]
      }
    }
}
watch: {
    "$i18n.locale": function () {
      this.aaa();
    }
 },
mounted() {
   this.aaa();
}

 

标签:insight,vue,required,表单,trigger,blur,i18n,message,true
From: https://www.cnblogs.com/WoAiZmm/p/16918133.html

相关文章

  • 直播软件搭建,vue3应用elementPlus table并滚动显示
    直播软件搭建,vue3应用elementPlustable并滚动显示1、首先使用了elementplus的table <template> <div>  <el-table   ref="table1"   :data="state......
  • vue版本兼容问题
    一些兼容问题 VueCLI4.5以下,对应的是Vue2 VueCLI4.5及以上,对应的是Vue3,也可以手动选择Vue2vue 3.0以下兼容的是element-ui前端组件库; vue3.0兼容的是eleme......
  • vue中使用tinymce
    之前使用了好几种引用tinymce的方式都已失败而告终,也找原因了。因为下面这个还是成功了,记录一下 1、引用tinymce-vuenpmi @tinymce/tinymce-vue-S2、封装控件<te......
  • 搭建vue3脚手架
    vite搭建脚手架:npminitvite@latest(y)yvite-demoVueTypeScriptvue搭建脚手架:PSD:\personalSite>npminitvue@latestnpmWARNconfigglobal--global,--loc......
  • vue 2 中防抖节流在当前页面里写
    isfilter(val){   //过滤   this.debounce(()=>{    this.init(val);   },1000);  },  debounce(fn,delay){   v......
  • vue中key使用的问题
    前言在vue要求在遍历的时候最好加上key,在使用过程中总有些疑问,在这里做下分析1.不使用key的时候vue是怎么处理的在vue2.x文档中有如下描述key的特殊attribute主要......
  • h5活动九宫格转盘-vue
    实现的效果操作步骤首先安装插件#npm安装npminstall@lucky-canvas/vue@latest#或者yarn安装yarnadd@lucky-canvas/vue@latest在main.js中引入//......
  • 解决在Vue3中html2canvas图片跨域问题
    <divv-html="transformImg(textContent.policyInterpretation)"class="topicContent"></div>consttransformImg=(str)=>{constreplaceCallback=(m,......
  • vue八大生命周期
    vue.js生命周期的八大状态:1、beforeCreate(创建前):vue实例初始化之前调用此阶段为实例初始化之后,此时的数据观察和事件配置都还没有准备好,而此时的实例中的data和el还是und......
  • Vue3学习笔记(七)—— 状态管理、Vuex、Pinia
    一、状态管理1.1、什么是状态管理?理论上来说,每一个Vue组件实例都已经在“管理”它自己的响应式状态了。我们以一个简单的计数器组件为例:<scriptsetup>import{re......