Question

以下代码是我已被剥离的代码段，以便单独显示此问题。它适用于Chrome和Safari，但我无法在Firefox中使用它。

我将Recurly.js checkout构建为Vue组件。对recurly.configure()的调用会替换托管iframe的四个底部输入字段，以获取客户的卡详细信息。使用的模板只是recurly.js文档https://dev.recurly.com/docs/recurlyjs

中的示例表单

在Firefox（版本49，OSX）中，重复初始化出现问题，因为iframe存在，但输入的值为隐藏，因此无法对其进行编辑。我无法在控制台中看到任何js错误。

事实上，如果对recurly.configure()的调用放在脚本底部而不是Vue组件的ready挂钩中，它确实在Firefox中开始工作。虽然因为ready钩子函数在编译后被调用并且第一次将$ el插入到文档中，但我仍然不愿将它放在组件之外。 - 来自Vue.js文档，因此确保在DOM中呈现组件。

为了让recurly.js将卡片付款托管字段注入到您的表单中，目标元素必须在您进行recurly.configure调用时出现在文档中。

任何想法如何解决这个问题？

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <style type="text/css">
        .recurly-hosted-field {
            border: 1px solid black;
            height: 20px;
            width: 200px;
            margin-top: 10px;
        }
    </style>
</head>
<body id="app">

    <checkout></checkout>

    <script src="https://js.recurly.com/v4/recurly.js"></script>
    <script type="text/javascript" src="http://cdn.jsdelivr.net/vue/1.0.28/vue.min.js"></script>

    <script>
        var Checkout = Vue.extend({
            template: '<form><input type="text" data-recurly="first_name"><input type="text" data-recurly="last_name"><div data-recurly="number"></div><div data-recurly="month"></div><div data-recurly="year"></div><div data-recurly="cvv"></div><input type="hidden" name="recurly-token" data-recurly="token"><button>submit</button></form>',
            ready: function() {
                recurly.configure({
                    publicKey: 'ewr1-hpPo5Al5WT46ulA4Rk2Z4t',
                });
            }
        });

        Vue.component('checkout', Checkout);

        new Vue({
            el: '#app',
        });

    </script>
</body>
</html>

在Vue.js组件

0 个答案: