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

Question

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

Sha*_*ppa 10 vue.js

当具有Vue组件的页面通过chrome的translate选项转换时,vue组件将停止重新呈现和更新视图.

例如:使用chromes的上下文菜单中的translate选项转换为chrome上的https://vuejs.org/v2/guide/#Handling-User-Input为另一种语言,反向消息演示停止工作.

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

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

Answer 1

P3t*_*ur0 3

一种可能的解决方法是使用 Vue 特殊属性key（如此处所述）和ref（如此处所述）。

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

<!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>

Run Code Online (Sandbox Code Playgroud)

您可能会注意到，您想要维护 Vue 响应行为（即：此处的反向操作）的 DOM 元素已通过属性key和ref属性进行了丰富。这里的想法是使用：

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

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

归档时间：	7 年，8 月前
查看次数：	1070 次
最近记录：	7 年，8 月前