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

今天使用自己写的后台时,不小心点了翻译成中文,发现页码的数字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,挺不错的小工具

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值