Q&A
下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。
【質問の主旨】
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件
0
ベストアンサー
methods が data の中にあります。
以下のように data と methods を同じ階層にしてください。
js
1data: { 2 posts: [...], 3 postFontSize: ... 4}, 5methods: { 6 onEnlargeText: ... 7}
画像に「どのボタンを押しても～」とありますが、postFontSize がひとつしかないのでそうなります。
投稿2021/09/15 08:33
総合スコア2090
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/09/15 08:47