Estoy intentando crear un pedido de pago de PayPal en mi sitio Vue. Actualmente estoy pasando dos accesorios al componente, así como dos objetos de datos.

 props: { price: Number, shipping: Number, }, data() { return {quantity: 1, switches: 'red'} },

Hago referencia a estas cuatro variables en mi código como this.price , this.shipping , etc. He confirmado que todas son válidas

Estoy intentando acceder a estos dentro de un método, pero esto se anula y los cuatro están indefinidos.

Todavía no entiendo this del todo, pero tenía la impresión de que usar una función de flecha como lo hice debería evitar que this cambie. ¿No es este el caso?

Código

 await paypal.Buttons({ style: { layout: 'vertical', color: 'black', shape: 'pill', }, createOrder: (data, actions) => { return actions.order.create({ purchase_units: [{ amount: { currency_code: "USD", value: ((this.price + this.shipping) * this.quantity).toString(), breakdown: { item_total: { /* Required when including the `items` array */ currency_code: "USD", value: this.price.toString() }, shipping: { currency_code: "USD", value: this.shipping.toString() } } }, items: [ { name: "First Product Name", /* Shows within upper-right dropdown during payment approval */ description: "Optional descriptive text..", /* Item details will also be in the completed paypal.com transaction view */ unit_amount: { currency_code: "USD", value: this.price.toString() }, quantity: this.quantity.toString }, ] }] }); }, }).render('#paypal-button-container')