Soy nuevo en Vue 3 y aunque uso Javascript regularmente, no soy un experto en eso. En mi proyecto Vue 3, encontré (no en SO) una solución a un desafío particular para implementar el método de solicitud de pago de Stripe. Obtuve el código de ejemplo para que funcionara, pero solo funciona correctamente cuando está envuelto dentro de esta (para mí) extraña construcción de función de vacío. Sin embargo, cuando estoy envuelto en esta construcción, ya no puedo acceder a las variables disponibles a través del objeto 'this', por lo que fuera de la función puedo acceder a 'this.myVar' dentro, no puedo.

Encontré una solución a esto, pero se siente torpe y estoy seguro de que hay una mejor manera. La forma torpe es asignar cualquier variable 'esto' a las variables globales de javascript (dentro de la etiqueta del script) justo antes de que se ejecute esta construcción; funciona, pero no se siente de la mejor manera por mucho tiempo. Aquí está el código en forma de ejemplo...

 <script> //section of Vue var myVar = ""; export default { name: 'myVueScreen', data() { return { myVar: "foo", }, } methods: { myMethod() { console.log(this.myVar); //prints 'foo' myVar = this.myVar; console.log(myVar); //prints 'foo' // strange function construct... what is this?? (function () { console.log(myVar); //prints 'foo' console.log(this.myVar); fails with this.myVar undefined })(); // I really don't understand the role of the 'extra' () } } }

¿Alguien puede decirme qué está pasando realmente con esta (función () {... construcción), por qué 'this.myVar' está fuera del alcance de alguna manera y, por lo tanto, falla como indefinido, y si hay una manera de pasarle 'this.myVar' sin usar variables JS globales como lo estoy actualmente ... ¡gracias!

Por cierto, descubrí que puede pasar valores variables a esta función de la siguiente manera, PERO este enfoque aún no puede ver 'this.myVar'

Así que esto funciona...

 (function (bar = "foo") { console.log(bar); //prints 'foo' ...

..y esto no, falla en el primer punto en que intenta leer this.myVar:

 (function (bar = this.myVar) { //fails here when reading 'this.myVar' console.log(bar); // never reaches this ...