Menu
When pages with Vue components are translated via chrome's translate option, the vue components stops re rendering and updating the view.
Ex: Translate https://vuejs.org/v2/guide/#Handling-User-Input on chrome using the translate option from chromes's context menu into a different language, the reverse message demo stops working.
Since Google translate plugin updates DOM outside of Vue's control, this is sort of expected. Looking for any work arounds that let both co-exist. The sections can be marked with "notranslate" class but that would mean it is no longer translatable.
React inspite of being based on virtual DOM, works even with DOM being modified by translate plugin.
569
Google Discontinues Google Translate Widget On December 4, 2019 Google discontinued its popular Google Translate Widget. The widget can no longer be added to new sites. It is currently still available for websites that already have it installed.
If you wish to turn off Live Translate or change how Live Translate works, tap the downwards facing arrow next to the languages. These settings apply to all conversations in that language, not just the current one.
The quick answer is that Google doesn't see translated content as duplication. The reason for this is that when you translate text from one language to another, enough changes are made that you essentially have new content on your hands. Sounds simple, right? Well, it is – as long as you get professional translation.
A possible workaround is to use the Vue special attributes key (as described here) and ref (as described here).
Here it is an example I did, starting from the link you provide above:
<!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>
As you may notice, the DOM element where you'd like to maintain the Vue reactive behavior (i.e.: the reverse operation here), has been enriched with both a key attribute and a ref one.
The idea here is to use:
:key to force replacement of the element instead of reusing it;ref to register a reference to the element: it is used in reverseMessage method in order to get the translated innerText content after the Google translation is performed.For sure, this workaround would affect the performance, but at least it provides the expected behavior (i.e.: the reverse function properly working also after a page translation).
151
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
