关于Laravel + Vue + <script>标签组合的问题

Question

这可能是一个比较高级的问题，我希望在座的各位能有一个解决方案。

我一直在使用Laravel + Vue。

我通常将div放在wrapper #app (包装我大部分应用程序的那个)上。

然后我把Vue放在这个#app上，就像Laravel通常做的那样：

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

现在，当我开始使用以下包时，我开始遇到问题：https://github.com/albertcht/invisible-recaptcha

我必须将@captcha标签添加到表单中，但这确实会在我的div #app中生成一些<script></script>标签( Vue对此并不满意)。

- 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.

有人知道我该怎么解决这个问题吗？

或者我把Vue实例放在整个包装器div上，并限制自己使用标签，这是不是做错了什么？或者这是最佳实践？

Answer 1

正如invisible-recaptcha的文档所指出的，您可以呈现与html分离的脚本标记。

文档中的代码示例：

<-- head -->
{!! app('captcha')->renderPolyfill() !!}

<-- body -->
{!! app('captcha')->renderCaptchaHTML() !!}

<-- footer -->
{!! app('captcha')->renderFooterJS('en') !!}