vue.js - Vue：mounted() 中的代码是否同步运行？

Question

我有 Vue 组件，其中一个 Vue 组件是 Square 支付表单。在我的mounted()中，我拥有所有 Square 逻辑并将表单制作为paymentForm. 创建付款后，我需要运行paymentForm.build(). 如何在不使用 setTimeout 的情况下做到这一点？

mounted() {

      this.paymentForm = new SqPaymentForm({
              // Initialize the payment form elements
            autoBuild: false,
            applicationId: applicationId,
            locationId: locationId,
            inputClass: 'form-control',

            // Customize the CSS for SqPaymentForm iframe elements
            inputStyles: [{
                fontSize: '14px',
            }],

            // Initialize the credit card placeholders
            cardNumber: {
                elementId: 'sqCardNumber',
                placeholder: 'Card Number'
            },
            cvv: {
                elementId: 'sqCvCode',
                placeholder: 'CVV'
            },
            expirationDate: {
                elementId: 'sqExp',
                placeholder: 'MM/YY'
            },
            postalCode: {
                elementId: 'sqPostalCode',
                placeholder: 'Postal Code'
            },
      // SqPaymentForm callback functions
      callbacks: {
        methodsSupported: function (methods) {},

        createPaymentRequest: function () {},

        cardNonceResponseReceived: function(errors, nonce, cardData) {
            debugger

            if (errors) {
                cardNonceError(errors);
                return;
            }

            cardNonceReceived(nonce);
        },

        unsupportedBrowserDetected: function() {
            alert('Sorry, your browser is not supported!');
        },
        inputEventReceived: function(inputEvent) {
            switch (inputEvent.eventType) {
                case 'focusClassAdded':
                    // HANDLE AS DESIRED
                    break;
                case 'focusClassRemoved':
                    // HANDLE AS DESIRED
                    break;
                case 'errorClassAdded':
                    // HANDLE AS DESIRED
                    break;
                case 'errorClassRemoved':
                    // HANDLE AS DESIRED
                    break;
                case 'cardBrandChanged':
                    // HANDLE AS DESIRED
                    break;
                case 'postalCodeChanged':
                    // HANDLE AS DESIRED
                    break;
            }
        },

       paymentFormLoaded: function() {

           paymentForm.setPostalCode(postalCode);

           formDisplayHandler();
       }
      }
    });

    // setTimeout(() => {
        this.paymentForm.build()

    // }, 500);
}

标签： vue.js