Компоненты Vue перестают обновляться, когда страница переводится Google translate

Когда страницы с компонентами Vue переводятся через опцию translate в chrome, компоненты vue прекращают рендеринг и обновление представления.

Ex: Translate https://vuejs.org/v2/guide/#Handling-User-Input в chrome, использующем опцию translate из контекстного меню chromes на другой язык, демонстрация обратного сообщения перестает работать.

Поскольку плагин Google translate обновляет DOM вне контроля Vue, это вроде как ожидаемо. Ищу любые обходные пути это позволило обоим сосуществовать. Разделы могут быть помечены классом "notranslate", но это будет означать, что он больше не может быть переведен.

React, несмотря на то, что он основан на виртуальном DOM, работает даже с DOM, модифицированным плагином translate.

Гиф переводчик Google влияющие на демо-сайте вю

1 10
vue.js

1 ответ:

Возможным обходным путем является использование специальных атрибутов 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>

Как вы можете заметить, элемент DOM, в котором вы хотели бы поддерживать реактивное поведение Vue (т. е.: обратная операция здесь), был обогащен как атрибутом key, так и атрибутом ref. Идея здесь заключается в том, чтобы использование:

  • :key принудительно заменить элемент вместо его повторного использования;
  • ref для регистрации ссылки на элемент: он используется в методе reverseMessage для получения переведенного содержимого внутреннего текста после выполнения перевода Google.

Конечно, этот обходной путь повлиял бы на производительность, но, по крайней мере, он обеспечивает ожидаемое поведение (т. е.: обратная функция корректно работает и после перевода страницы).

3