Vue.jsにてボタン押下時、@clickイベントが実行されない

前提

PHP(Laravel)にて、Vue.jsを初めて触っております。
Vueはおろか、PHPも初めて触りますので、不足事項がありましたらすみません。

実現したいこと

実現したいことは、ボタンが押下された場合にアラートを出せるようにしたいです。

（具体的な内容は別ですが、まずは動作確認をしたいです。
が、、、このレベルで詰まってしまっています・・・）

該当のソースコード・試したこと

画面を表示させた際には、createdのfunctionは動作するのですが、
ボタンのクリック時にイベントで実行させようとすると、実行しません。

ボタンのソース

php
1<button type="button" @click="onSubmit">ボタン</button>

Vueのソース

php
1<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
2<script>
3    new Vue({
4        el: '#app',
5        data: {
6            params: {
7                files: []
8            }
9        },
10        //createdは動作する
11        created: function() {
12            alert('created');
13            console.log('created!');
14        },
15　　　　//こちらが動作しない
16        methods: {
17            onSubmit() {
18                alert('クリック！');
19                console.log('clicked!');
20            },
21        },
22    });
23
24</script>

補足情報（FW/ツールのバージョンなど）

OS：Windows 10
php -v：PHP 8.0.0 (cli)
node -v：v14.16.0
ブラウザ：chrome バージョン: 89.0.4389.114

ソース全文

php
1@extends('layouts.defalt')
2<head>
3    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
4</head>
5@section('content')
6
7<div class="form-group">
8    <label>ファイル選択</label>
9    <input
10        type="file"
11        class="form-control"
12        accept="*"
13        @change="onFileChange"
14        multiple>
15</div>
16<button type="button" class="btn btn-primary" @click="onSubmit">ボタン</button>
17
18<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
19<script>
20    new Vue({
21        el: '#app',
22        data: {
23            params: {
24                files: []
25            }
26        },
27        //createdは動作する
28        created: function() {
29            alert('created')
30            console.log('created!')
31        },
32        //こちらが動作しない
33        methods: {
34            onSubmit() {
35                alert('クリック！');
36                console.log('clicked!');
37            },
38        },
39    });
40</script>
41@endsection

php
1<!doctype html>
2<html lang="ja">
3<head>
4    <!-- 必要なメタタグ -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7    <!-- Bootstrap CSS -->
8    <link href="/css/tailwind.css" rel="stylesheet" type="text/css">
9    <link href="/css/original.css" rel="stylesheet" type="text/css">
10    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
11</head>
12
13<body>
14    <div class="container" style="margin-top:5px;">
15        @yield('content')
16    </div>
17    <!-- オプションのJavaScript -->
18    <!-- 最初にjQuery、次にPopper.js、次にBootstrap JS -->
19    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
20    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
21    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
22</body>
23</html>
24

試したこと２（ミニマムに1つのblade.phpに収めたものも実行しませんでした。）

php
1<!doctype html>
2<html lang="ja">
3<head>
4    <!-- 必要なメタタグ -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7</head>
8
9<body>
10    <button type="button" class="btn btn-primary" @click="onSubmit">ボタン</button>
11    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
12    <script>
13        new Vue({
14            el: '#app',
15            data: {
16                params: {
17                    files: []
18                }
19            },
20            //createdは動作する
21            created: function() {
22                alert('created')
23                console.log('created!')
24            },
25            //こちらが動作しない
26            methods: {
27                onSubmit() {
28                    alert('クリック！');
29                    console.log('clicked!');
30                },
31            },
32        });
33    </script>
34</body>
35</html>

Suumon

2021/04/04 14:55

onSubmit: function () { で書き直してみたらいけたりしないですか？

tk08

2021/04/04 15:20 編集

早速ありがとうございます。以下試してみました。 ①「methodsの部分」前）onSubmit() { 後）onSubmit: function() { ②「ボタンのクリック部分」前）@click="onSubmit" 後）@click="onSubmit()" ③①と②の両方を適用ですが、いずれも動作しませんでした…。引き続き確認してみます。

FKM

2021/04/05 00:54

#appの範囲が適用されるエレメント（htmlタグの部分）を提示してください。

tk08

2021/04/05 13:03

FKM様ありがとうございます。質問の部分に、「ソース全文」「試したこと2」を追記させていただきました。恐れ入りますが、ご確認いただけますと幸いです。

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

回答1件

ベストアンサー

    <div id="app">
      <button type="button" class="btn btn-primary" @click="onSubmit">
        ボタン
      </button>
    </div>

これでいけるのではないでしょうか？

投稿2021/04/05 13:52

Suumon

総合スコア211

tk08

2021/04/05 14:50

できました！なるほど、el = element で名前を指定しないといけないのですね。勉強になりました。ご回答いただいた皆様、ありがとうございました。ちなみにですが・・・ id = "app" el: '#app', や、 class = "app" el: '.app', でも実行することができました。

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