Vue.jsで未定義の関数が指摘されました。コードのどこを変えればエラーがなくなるでしょうか？

下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。

【質問の主旨】

Vue.jsを読み込むindex.htmlファイルで、ブラウザ上でボタンを押すと、文字のサイズが大きくなるアプリを作りたいと考えています。

ですが自分が作成したコードでは、index.htmlを実行したときに、コンソール画面でReferenceError: onEnlargeText is not definedというエラーが表示されます。個人的にはmain.js にあるVueインスタンスの中でonEnlargeText関数を定義しているつもりです。なぜこのようなエラーが出るのか分かりません。

このエラーが表示されることなく、ボタンを押せばブラウザに表示された文字が大きくなるアプリを作るためには、【質問の補足】で述べるコードのどこを書き換えれば良いでしょうか？

【質問の補足】

1. コードの内容

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>My Vue App</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>

  <div id="blog-posts-events-demo">
    <div :style="{ fontSize: postFontSize + 'em' }">
      <blog-post
        v-for="post in posts"
        v-bind:key="post.id"
        v-bind:post="post"
        v-bind:title="post.title"
        v-on:enlarge-text="onEnlargeText"
      ></blog-post>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="js/main.js"></script>
</body>
</html>

main.js

Vue.component('blog-post', {
  props: ['post'],
  template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <button>
        Enlarge text
      </button>
      <div v-html="post.content"></div>
    </div>
  `
})

new Vue({
  el: '#blog-posts-events-demo',
  data: {
    posts: [
      { id: 1, title: 'My journey with Vue', content: '...content...' },
      { id: 2, title: 'Blogging with Vue', content: '...content...' },
      { id: 3, title: 'Why Vue is so fun', content: '...content...' }
    ],
    methods: {
      onEnlargeText: function() {
        this.postFontSize += enlargeAmount
      }
    },
    postFontSize: 1
  }
})

2. コードの引用元

上記のコードは、主にVue.js公式ドキュメントの「イベントと値を送出する」から引用しています。

以上、ご確認よろしくお願い申し上げます。

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

回答1件

ベストアンサー

methods が data の中にあります。
以下のように data と methods を同じ階層にしてください。

js
1data: {
2  posts: [...],
3  postFontSize: ...  
4},
5methods: {
6  onEnlargeText: ...
7}

画像に「どのボタンを押しても～」とありますが、postFontSize がひとつしかないのでそうなります。

投稿2021/09/15 08:33

neko_daisuki

総合スコア2090

echizeyayota

2021/09/15 08:47

neko_daisuki さん。コメントありがとうございます！ > 以下のように data と methods を同じ階層にしてください。ご指摘のようにdata と methods を同じ階層にすると、意図した通りの動作ができました。今後ともどうぞよろしくお願いします。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！