Question

当具有Vue组件的页面通过chrome的translate选项进行翻译时，vue组件将停止重新呈现和更新视图。

Ex：使用chromes上下文菜单中的translate选项将chrome翻译https://vuejs.org/v2/guide/#Handling-User-Input为另一种语言，反向消息演示停止工作。

由于谷歌翻译插件更新了Vue控制之外的DOM，这是一种预期。寻找让两者共存的任何工作。这些部分可以标记为“notranslate”类，但这意味着它不再可翻译。

尽管基于虚拟DOM，但仍然可以通过翻译插件修改DOM。

Answer 1

可能的解决方法是使用Vue特殊属性键（如所述here）和 ref （如所述here）。< / p>

这是我做的一个例子，从你上面提供的链接开始：

<!DOCTYPE html>
<html lang="en">

 <head>
  <meta charset="UTF-8">
  <title>Vue.js Reverse Example</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
 </head>

 <body>

<div id="app-5" class="demo">
  <!-- Adding Vue attributes here -->
  <p :key="message" ref="msg">{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>
<script>
var vm = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },

  methods: {
    reverseMessage: function () {
      // vm.$refs.msg.innerText retrieves the translated content
      this.message = vm.$refs.msg.innerText.split('').reverse().join('')
    }
  }
})
</script>
</body>

</html>

您可能已经注意到，您希望维持Vue反应行为的DOM元素（即：此处的反向操作）已经使用key属性和{{1一个。这里的想法是使用：

ref强制更换元素而不是重复使用;
:key注册对该元素的引用：它在ref方法中使用，以便在执行Google翻译后获取翻译的innerText内容。

当然，这种解决方法会影响性能，但至少它提供了预期的行为（即：在页面翻译后也能正常工作的反向功能）。

当Google翻译翻译页面时，Vue组件会停止更新

1 个答案: