javascript - 将 Stripe JS 集成到 Laravel 6.0 : [Vue warn]: Error compiling template:

Question

我的 checkout.blade.php 文件中集成了 Stripe.js。它有效但并非没有此错误:

[Vue warn]: Error compiling template:

Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed

我已使错误消失，但 Stripe 元素不会出现在页面上。我还在这个文件中集成了其他 JS，用于我的表单验证，它工作正常并且不会返回错误。

这是返回错误的 Stripe 代码:

<script>
        (function(){
        // Create a Stripe client.
        var stripe = Stripe('pk_test_9dn1vt3i0j0Q5GZdwAXn9iUs00iMziQDyD');

        // Create an instance of Elements.
        var elements = stripe.elements();

        // Custom styling can be passed to options when creating an Element.
        // (Note that this demo uses a wider set of styles than the guide below.)
        var style = {
        base: {
            color: '#32325d',
            fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
            fontSmoothing: 'antialiased',
            fontSize: '16px',
            '::placeholder': {
            color: '#aab7c4'
            }
        },
        invalid: {
            color: 'red',
            iconColor: 'red'
        }
        };

        // Create an instance of the card Element.
        var card = elements.create('card', { style: style, hidePostalCode: true });

        // Add an instance of the card Element into the `card-element` <div>.
        card.mount('#card-element');

        // Handle real-time validation errors from the card Element.
        card.addEventListener('change', function(event) {
        var displayError = document.getElementById('card-errors');
        if (event.error) {
            displayError.textContent = event.error.message;
        } else {
            displayError.textContent = '';
        }
        });

        // Handle form submission.
        var form = document.getElementById('payment-form');
        form.addEventListener('submit', function(event) {
        event.preventDefault();

        stripe.createToken(card).then(function(result) {
            if (result.error) {
            // Inform the user if there was an error.
            var errorElement = document.getElementById('card-errors');
            errorElement.textContent = result.error.message;
            } else {
            // Send the token to your server.
            stripeTokenHandler(result.token);
            }
        });
        });

        // Submit the form with the token ID.
        function stripeTokenHandler(token) {
        // Insert the token ID into the form so it gets submitted to the server
        var form = document.getElementById('payment-form');
        var hiddenInput = document.createElement('input');
        hiddenInput.setAttribute('type', 'hidden');
        hiddenInput.setAttribute('name', 'stripeToken');
        hiddenInput.setAttribute('value', token.id);
        form.appendChild(hiddenInput);

        // Submit the form
        form.submit();
        }
        })();
    </script>

请注意，现在 Stripe 代码嵌套到我的:

@section('content')

@endsection

由我的父模板 '''app.blade.php''' 扩展。

如果我将它粘贴到父模板之外并用类似这样的东西包裹它:

@section('stripe')

@endsection

然后没有错误返回，但该元素不会出现，因为我的 JS 不知道在哪里安装我的 Stripe 元素。当然，我的父模板中也有这个:@yield('stripe')

如何在不出现此模板错误的情况下显示我的 Stripe 元素？

编辑:我使用了 Laravel/ui 脚手架(Bootstrap 版本)。附件如下:

应用程序.js:

require('./bootstrap');

window.Vue = require('vue');

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

ExampleComponent.vue:

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

谢谢

Answer 1

正如您在问题中提到的，您使用的是来自 laravel/ui 的引导脚手架。 .根据您用于生成该脚手架的命令，它可以将一些以 VueJS 为中心的文件或数据安装到普通文件中，这似乎发生在您身上。虽然您自己对 VueJS 没有做任何事情，但脚手架为您做了。

在您的 app.js 文件中，如果您删除或注释掉第 3-7 行，然后重新运行 laravel-mix:

require('./bootstrap');

// 3 window.Vue = require('vue');
// 4
// 5 const app = new Vue({
// 6    el: '#app',
// 7 });

你会解决你的问题。

如第 6 行所示，VueJS 以 app id 元素为目标，该元素存在于 app.stub 中。 ，这是一个通常放在 resources/views/layouts/app.blade.php 下的文件；此 View 用作扩展其他 View 的基础 View 。鉴于 app id'd div 封装了大部分 page/body 元素，您放入其中的任何内容 VueJS 都将解释为它的基本模板的一部分。这就是为什么您的错误警告不要“将脚本标记放入模板内”。

如前所述，对 app.js 文件的上述更改当然会解决问题，因为它将 VueJS 排除在外。尽管如此，如果您根本不打算使用 VueJS，您也可以将其从 package.json 文件中删除并运行 npm prune。删除未使用的包(如任何未在 package.json 中指定且不需要作为另一个包的依赖项的包)，以从您的站点中完全删除该库。