Vueインスタンスのdataプロパティの内容を表示させるために自分のコードをどのように書き換えれば良いでしょうか？

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

【質問の主旨】

Vueインスタンスのdataプロパティ内のpostsからindex.htmlファイルにおいて、h3の見出しタグをすべて表示をさせるためには、下記のindex.htmlとmain.jsファイルをどのように書き換えれば良いでしょうか？

【質問の補足】

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"
      ></blog-post>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="js/main.js"></script>
</body>
</html>

2. main.js

new Vue({
  el: '#blog-posts-events-demo',
  data: {
    posts: [
      'My journey with Vue',
      'Blogging with Vue',
      'Why Vue is so fun',
    ],
    postFontSize: 1
  }
})

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>
  `
})

3. 各ファイルの引用元

上記のコードはVue.jsの公式ドキュメントの「子コンポーネントのイベントを購読する」から引用しており、
postsの中身だけ、配列の要素として任意の文字列を挿入しています。

4. 自分のブラウザで実行したときの状況

My journey with Vue
(button: Enlarge text)

Blogging with Vue
(button: Enlarge text)

Why Vue is so fun
(button: Enlarge text)

最終的には上記の内容をブラウザ上で表示させたいと考えています。ですがindex.htmlを実行すると画面には何も表示されません。またコンソールログを確認しても何もエラーは発生していません。

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

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

回答1件

ベストアンサー

index.html と main.js で post の id, title, content を参照しようとしています。
ですから posts はそのプロパティを含むオブジェクトの配列にします。

    posts: [
      { id: 1, title: 'My journey with Vue', content: '本文' },
      { id: 2, title: 'Blogging with Vue', content: '本文' },
      { id: 3, title: 'Why Vue is so fun', content: '本文' }
    ],

投稿2021/09/13 14:43

neko_daisuki

総合スコア2090

echizeyayota

2021/09/14 07:24

neko_daisuki さん。コメントありがとうございます。postsの中にオブジェクトの配列を要素として挿入してみました。ですがindex.htmlをリロードしても何も表示されません。現在のindex.htmlとmain.jsのファイルの内容についてGitHubで公開しました。 https://github.com/echizenyayota/vuejs_tutorial_3 私が何か見落としている点などがございましたら、ご指摘いただくと幸いです。