当前位置: 首页 > news >正文

解决VueI18n使用浏览器插件翻译后,切换国际化失效的问题

问题复现

在使用Vue-i18n对页面进行国际化的时候,使用浏览器翻译插件(如腾讯翻译)后,切换国际化语言,随后当我们关闭浏览器翻译插件后,再次切换国际化语言,原来被翻译的文字无法正确切换

出现原因

浏览器翻译插件对文本翻译时使用了display对原文本进行修改,当关闭浏览器翻译插件后,没有触发浏览器的重排机制,所以没有导致vue并没有刷新dom

解决办法

给失效的页面组件使用key绑定,当切换语言的时候,使得Vue的Diff算法能够识别到虚拟dom的改变从而重新渲染DOM以此解决此问题

<template>
 <div :key="locale">
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n()
</script>

http://www.dtcms.com/a/73060.html

相关文章:

  • Jupyter notebook的安装与使用
  • 共享内存shm_size和内存锁ulimits.memlock配置
  • Flutter_学习记录_connectivity_plus 检测网络
  • java简单基础学习
  • 利用pprof对golang进行性能分析
  • 图片填充容器,如何描述
  • Flutter 边框按钮:OutlinedButton 完全手册与设计最佳实践
  • Java集成WebSocket实现消息推送,详细步骤以及出现的问题如何解决
  • LeetCode 解题思路 18(Hot 100)
  • ESP32移植Openharmony外设篇(10)inmp441麦克风
  • 【接口耗时】⭐️自定义拦截器实现接口耗时统计
  • 基于消息方式的系统间通信
  • (分块)洛谷 P2801 教主的魔法 题解
  • TimeGAN:开启时间序列生成新纪元,结合GAN与自回归模型的优势
  • 智能运维管理系统的主要优势
  • 基于asp.net实现的连锁餐厅收银系统[包运行成功+永久免费答疑辅导]
  • 4、linux c 进程
  • RK3568 android11 基于PN7160的NXP NFC移植
  • C++基础——从C语言快速入门
  • 前端权限系统
  • ctfshow web刷题记录
  • 2.机器学习-回归模型-非线性模型
  • 面试求助:接口测试用例设计主要考虑哪些方面?
  • Matlab自学笔记四十八:各类型缺失值的创建、判断、替换、移位和处理方法
  • 计算机网络笔记再战——理解几个经典的协议HTTP章3
  • 【Gitee】删除仓库的详细步骤
  • centos8 安装指定版本 nodejs
  • 【数据结构】ArrayList顺序表
  • 数据库:一文掌握 PostgreSQL 的各种指令(PostgreSQL指令备忘)
  • Mac 使用 Crossover 加载 Windows Steam 游戏库,实现 Windows/Mac 共享移动硬盘