Laravel,Stripeでviewでエラーが出てしまう

LaravelでStripeを使い決済機能をつけようとしています。

このサイトを参考にしながら進めています。
https://takkublog.net/stripe02/

画面に行くとコンソールにエラーが出てしまいます。

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

調べた結果

div要素の閉じタグなどはしっかりしているか？
src="https://checkout.stripe.com/checkout.js"を読み込む位置がおかしい？

調べたサイト
https://stackoverflow.com/questions/38119088/error-templates-should-only-be-responsible-for-mapping-the-state-to-the-ui-avo

https://qiita.com/narutaro/items/50d0e4714f93279502c9

buy.blade.php
1<div class="content">
2      <form action="{{ asset('charge') }}" method="POST">
3        {{ csrf_field() }}
4          <script
5                  src="https://checkout.stripe.com/checkout.js" class="stripe-button"
6                  data-key="{{ env('STRIPE_KEY') }}"
7                  data-amount="1000"
8                  data-name="Stripe Demo"
9                  data-shipping-address=true
10                  data-label="決済をする"
11                  data-description="Online course about integrating Stripe"
12                  data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
13                  data-locale="auto"
14                  data-currency="JPY">
15          </script>
16      </form>
17    </div>

app.blade.php
1<!doctype html>
2<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1">
6
7    <!-- CSRF Token -->
8    <meta name="csrf-token" content="{{ csrf_token() }}">
9
10    <title>{{ config('app.name', 'Tenlife') }}</title>
11
12    <!-- Scripts -->
13    <script src="{{ asset('js/app.js') }}" defer></script>
14    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
15
16    <!-- Fonts -->
17    <link rel="dns-prefetch" href="//fonts.gstatic.com">
18    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
19
20    <!-- Styles -->
21    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
22    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.3.0/dist/css/uikit.min.css" />
23    <script src="https://cdn.jsdelivr.net/npm/uikit@3.3.0/dist/js/uikit.min.js"></script>
24    <script src="https://cdn.jsdelivr.net/npm/uikit@3.3.0/dist/js/uikit-icons.min.js"></script>
25</head>
26<body>
27    <div id="app">
28    </div>
29</body>
30</html>
31

自分では原因を突き止めることができませんでした。

どなたか知恵を貸していただきたいです。

よろしくお願いします。

php 7.4
laravel 6.0

行動規範の内容に同意します

回答1件

ベストアンサー

エラーではなくwarnのようですが
簡単にいうと

id='app'の中にscriptタグを入れるんじゃねーよ！
ということです。
Vueを使っていない様ならVueを消してください。（app.jsに入ってます）
または
id='app'を消しても良いです

投稿2020/02/27 13:02

mikkame

総合スコア5036

tenlife

2020/02/27 21:21

vueを使用している場合はどのように対応すれば良いでしょうか。。

mikkame

2020/02/28 00:56

Vueを使用している場合簡単差し込むだけ！checkout.jsさんが動作しないので https://qiita.com/reon777/items/486eefb08e0c94042148 こういうの参考にしてみてください。上記が難しいようでしたら荒技ですが、その部分だけVueを入れないという手もありかもしれません

tenlife

2020/02/28 02:38

解決しました！丁寧にありがとうございました！

行動規範の内容に同意します