i18n国际化切换中英文后data里面的数据为什么没有变?写到computed属性里,不要写到data里

rules:{
         oemId:[{ required: true, message: this.$t('deployment.rules.oemId'), trigger: 'change' }],
         deploymentName: [{ required: true, message:this.$t('deployment.rules.deploymentName'), trigger: 'blur' }],
         deploymentDesc: [{ required: true, message: this.$t('deployment.rules.deploymentDesc'), trigger: 'blur' }]   
    }, 

我有个校验使用的是i18n里面的内容。但是发现我切换了语言。但是里面的提示并没有随之改变。

最后发现必须把国际化的内容放在computed里面才可以

computed:{

rules() {
        return{
         oemId:[{ required: true, message: this.$t('deployment.rules.oemId'), trigger: 'change' }],
         deploymentName: [{ required: true, message:this.$t('deployment.rules.deploymentName'), trigger: 'blur' }],
         deploymentDesc: [{ required: true, message: this.$t('deployment.rules.deploymentDesc'), trigger: 'blur' }]    
        }
    }, 

}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在uniapp的pages.json的tabBar里面实现中英文切换,可以按照以下步骤进行操作: 1. 在pages.json里面添加一个lang字段,用来保存当前语言的信息,如下所示: ```json { "pages": [ { "path": "pages/index/index", "name": "index", "lang": "zh", // 当前语言为中文 "text": "首页", "iconPath": "static/tabbar/home.png", "selectedIconPath": "static/tabbar/home-active.png" }, // 其他tabBar页面 ], "tabBar": { // tabBar配置信息 } } ``` 2. 在app.vue里面添加一个langChange方法,用来切换当前语言,并更新pages.json里面的lang字段,代码如下: ```vue <template> <view class="container"> <router-view /> </view> </template> <script> export default { data() { return { lang: "zh" // 初始化当前语言为中文 }; }, methods: { langChange() { this.lang = this.lang === "zh" ? "en" : "zh"; // 切换当前语言 uni.setStorageSync("lang", this.lang); // 将当前语言保存到本地缓存中 const pages = getCurrentPages(); // 获取当前页面栈 const len = pages.length; for (let i = 0; i < len; i++) { const page = pages[i]; if (page.route.indexOf("pages/") === 0) { const route = page.route.replace("pages/", ""); const tabBar = this.$pagesJson.tabBar; const index = tabBar.list.findIndex(item => item.pagePath === route); if (index >= 0) { tabBar.list[index].lang = this.lang; // 更新pages.json里面的lang字段 } } } } } }; </script> ``` 3. 在tabBar组件里面添加一个点击事件,调用langChange方法进行语言切换,代码如下: ```vue <template> <view class="tabbar"> <view v-for="(item, index) in tabBar.list" :key="index" @click="switchTab(item.pagePath)" :class="{ active: activeIndex === index }" > <image :src="activeIndex === index ? item.selectedIconPath : item.iconPath" /> <text>{{ item.text }}</text> </view> </view> </template> <script> export default { data() { return { activeIndex: 0 // 当前选中的tabBar项 }; }, methods: { switchTab(pagePath) { const tabBar = this.$pagesJson.tabBar; const index = tabBar.list.findIndex(item => item.pagePath === pagePath); if (index >= 0) { this.activeIndex = index; // 更新当前选中的tabBar项 uni.switchTab({ url: `/${pagePath}` }); } }, langChange() { this.$parent.langChange(); // 调用父组件的langChange方法进行语言切换 } } }; </script> ``` 4. 在需要进行中英文切换的页面里面,根据lang字段来显示对应的中英文文本,代码如下: ```vue <template> <view class="container"> <text>{{ lang === "zh" ? "中文文本" : "English Text" }}</text> </view> </template> <script> export default { computed: { lang() { return this.$page.meta.lang; // 获取当前页面的lang字段 } } }; </script> ``` 这样,就可以在uniapp的pages.json的tabBar里面实现中英文切换了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值