vue和google翻译助手的冲突问题

最新推荐文章于 2022-09-02 22:04:11 发布

西城xml

最新推荐文章于 2022-09-02 22:04:11 发布

阅读量2.2k

点赞数 2

分类专栏：前端技术

本文链接：https://blog.csdn.net/xichengqc/article/details/92795885

版权

前端技术专栏收录该内容

4 篇文章 0 订阅

订阅专栏

今天使用自己写的后台时，不小心点了翻译成中文，发现页码的数字5变成了汉字"五"，且翻页功能失效，一阵惊慌。
于是google了一会，发现已经有人提了issue，但vue开发人员回复暂时不打算修复这个问题。具体issue如下：
https://github.com/vuejs/vue/issues/9160
下面大致说明一下原因：google翻译助手在翻译页面时修改了页面dom，而数据驱动的框架无法认定dom是最新dom，因此
驱动修改dom失败
接下来用两个小demo来复现问题，分别测试v-if和v-for的失效，其他指令大家可以自行验证：
组件VForDemo：

<template>
    <div>
        <ul>
            <li v-for="item in userList">
                {{item}}
            </li>
        </ul>
        <button @click="changeUsers">修改数据</button>
    </div>
</template>

<script>
	export default {
		name: "VForDemo",
        data() {
			return {
				userList: [
					'默认',
					'默认',
					'默认',
					'默认',
					'默认',
                ],
				users: [
                    '西城xml',
                    '西城xml',
                    '西城xml',
                    '西城xml',
                    '西城xml',
                ],
                alternativeUsers: [
	                'Bryan',
	                'Bryan',
	                'Bryan',
	                'Bryan',
	                'Bryan',
                ]
            }
        },
        methods: {
	        changeUsers() {
		        this.userList = (this.userList.indexOf("Bryan") === -1 ? this.alternativeUsers : this.users);
	        }
        }
	}
</script>

<style scoped>

</style>

组件VIfDemo：

<template>
    <div>
        <p v-if="name === 'email'" style="color: green">email: xichengxml@163.com</p>
        <p v-else style="color: rebeccapurple">phone: 135****5731</p>
        <button @click="changeSeenState">修改可见性</button>
    </div>
</template>

<script>
	export default {
		name: "VIfDemo",
		data() {
			return {
                name: 'email'
            }
		},
        methods: {
	        changeSeenState() {
		        this.name = (this.name === 'email' ? 'phone' : 'email');
	        }
        }
	}
</script>

<style scoped>

</style>

主app组件：

<template>
  <div id="app">
      <h4>v-for测试</h4>
      <VForDemo></VForDemo>
      <h4>v-if测试</h4>
      <VIfDemo></VIfDemo>
  </div>
</template>

<script>
    import VForDemo from "./components/VForDemo";
    import VIfDemo from "./components/VIfDemo";
    export default {
        name: 'App',
        components: {
            VForDemo,
            VIfDemo
        }
}
</script>

<style>

</style>

正常操作：
在这里插入图片描述
接下来翻译页面：

重复上述操作，发现v-for和v-if均已失效：

目前暂未解决该问题，因为是后台应用，不影响使用，如果有小伙伴找到解决方案，辛苦告知我一下；使用的gif生成工具是ScreenToGif，挺不错的小工具