how to use the google-translate-api translation outside the method?

Question

I started using Cloud Google and implemented the translation API in my code but I can't use the response outside the callback.

methods:{
        clicked(){
            const text = "Olá";
            const target = navigator.language;
            googleTranslate.translate(text, target, function(err, translation){
                console.log(translation.translatedText)
                //this.newText =  translation.translatedText;
            });
            //console.log(this.newText);
        },
    }

Show the error with or without the console.log. In the this.newText = translation.translatedText;

Error in render: "TypeError: Cannot read property 'newText' of undefined"

I would like to show the user the answer in the template. How can I do it?

Answer 1

Using the function keyword changes the 'this' context. You can either save 'this' outside of the function or use arrow functions.

Here's how you would use an arrow function

methods:{
    clicked(){
        const text = "Olá";
        const target = navigator.language;
        googleTranslate.translate(text, target, (err, translation) => {
            console.log(translation.translatedText)
            //this.newText =  translation.translatedText;
        });
        //console.log(this.newText);
    },
}