Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

谷歌翻译插件翻译页面后导致的v-if 指令不生效 #9160

Closed
pillarBoy opened this issue Dec 7, 2018 · 8 comments
Closed

谷歌翻译插件翻译页面后导致的v-if 指令不生效 #9160

pillarBoy opened this issue Dec 7, 2018 · 8 comments

Comments

@pillarBoy
Copy link

Version

2.5.2

Reproduction link

https://github.com/pillarBoy/vue-v-if

Steps to reproduce

<template>
  <div class="hello">
    <div v-if="msg=='email'">email</div>
    <p v-else>phone</p>
    <button @click="change">change</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'email'
    }
  },
  mounted() {
    setTimeout(() => {
      this.msg = 'email'
    }, 2000)
  },
  methods: {
    change() {
      this.msg = this.msg==='email' ? 'phone' : 'email';
    }
  }

}
</script>

我是用 vue-cli 创建的项目，在HelloWorld.vue用了上面的代码

正常使用，不会出现问题；
问题出现步骤：

1.运行项目
2.然后在浏览器中，按鼠标右键，选择 【翻成中文（简体）(T)】
3.然后点击 change 按钮

问题出现了，v-if="msg=='email'"代码无效了，v-else不会出现

我看了一下vue 项目源码，找到了processIf 函数，我想定位得更准确的位置。但是我对Vue的源码熟悉度和render过程理解不够深入，所以我找不到根本原因。请问这个问题可以解决吗？如果有解决的可能，请告诉我一下？如果不能解决，也请反馈给我一下这个导致这个问题出现的原因，非常感谢。

希望可以解决这个问题，

实际就是，使用了谷歌翻译之后，v-if 存在一些bug，if条件如果都是数字，不会有问
题，如果是一些单词，那就会被修改掉。

What is expected?

希望后期版本可以修复这个问题

What is actually happening?

谷歌翻译插件与 v-if 某些场景无法使用

如果有解决这个问题，请反馈一下给我。
@Justineo
Copy link
Member

Justineo commented Dec 7, 2018

I'd say it's probably the expected behavior. Google Translate mutates DOM structure and it's very hard to make modern data-driven view frameworks resilient to such services. AFAIK, React faces the same problem and they don't have a solution for this yet either. I think this would raise a much larger issue on interoperability in general and we may consider about it in the future.

@pillarBoy
Copy link
Author

@Justineo

react 我也是使用react-cli 创建的，下面的代码是App.js的代码

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      msg: 'email'
    }
    this.handleChange = this.handleChange.bind(this)
  }
  componentDidMount() {

    setTimeout(() => {
      this.setState({
        msg: 'phone'
      })
    }, 5000)
  }
  handleChange() {
    console.log(255);
    this.setState({
      msg: this.state.msg === 'email' ? 'phone' : 'email'
    })
  }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          {this.state.msg === 'email' ? (<p>email</p>):(<p>phone</p>)}
          <p>{this.state.msg}</p>
          <button onClick={this.handleChange}>{this.state.msg}</button>
        </header>
      </div>
    );
  }
}

export default App;

  • 我同样尝试过用react 去实现，他会出现一个闪现的翻译过程，但是不会有某些功能不能实现的情况呢。

  • 不过，非常感谢你的反馈。我想到了一些代替方案，只是不太友好。

@posva
Copy link
Member

posva commented Dec 7, 2018

If any library or extension modifies the dom then vue cannot ensure it will be kept up to date. But this problem will happen with any front end framework.
Supporting external modifications of dom would imply either detecting when these are modified by external code which is costly and may be not even bullet proof, or rerendering the whole tree which has even worse pref implications. I don't think there is much we can do here but I cannot read Chinese, I can only use a translator. @Justineo I will let you close this of you feel the same way

@Justineo
Copy link
Member

Justineo commented Dec 7, 2018

I agree it might be very complicated to “fix” such issue so I suppose we won't invest time on this in the short term.

@Justineo Justineo closed this as completed Dec 7, 2018
@xiaoqizhu
Copy link

我也遇到这个问题了，，，困扰了我两天，太坑了，，，

@xiaochunjimmy xiaochunjimmy mentioned this issue Aug 13, 2019
Closed
@blessleon
Copy link

hands up+1

@bihuanJ
Copy link

bihuanJ commented May 28, 2020

我也遇到了相同的问题

@ineo6
Copy link

ineo6 commented Oct 11, 2021

Have a try (disable translation):

<html lang="en" translate="no">

MDN Doc

And fallback which should work for Edge and Chrome:

<meta name="google" content="notranslate">

@sodatea sodatea mentioned this issue Mar 4, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@posva @Justineo @ineo6 @pillarBoy @bihuanJ @xiaoqizhu @blessleon