vue.js 切り替え　初期時に1番目を表示させたい

実現したい事

リストで繰り返した値をクリックして、1番目を表示させる（やっていることはタブの切り替えと変わりません。）
下記のコードでは、クリックをすれば表示の切り替えは実装できましたが、
1番目のコンテンツが初期時に表示されなく、質問させて頂きました。
ご存知の方いらっしゃいましたらご教示頂けると幸いです。

▼参考にしたサイト
https://jsfiddle.net/chrisvfritz/Lp20op9o/

html
1<script src="https://unpkg.com/vue"></script>
2
3<div id="dynamic-component-demo">
4
5  <div class="posts-tab">
6      <ul class="posts-sidebar">
7        <li
8          v-for="post in posts"
9          v-bind:key="post.id"
10          v-bind:class="{ selected: post === selectedPost }"
11					v-on:click="selectedPost = post"
12        >
13          {{ post.title }}
14        </li>
15      </ul>
16      <div class="selected-post-container">
17      	<div 
18        	v-if="selectedPost"
19          class="selected-post"
20        >
21          <h3>{{ selectedPost.title }}</h3>
22          <div v-html="selectedPost.content"></div>
23        </div>
24      </div>
25    </div>
26  
27</div>

javascript
1new Vue({
2  el: '#dynamic-component-demo',
3  data: {
4    posts: [{
5      id: 1,
6      title: 'タイトル1',
7      content: '<p>本文1</p>'
8    }, {
9      id: 2,
10      title: 'タイトル2',
11      content: '<p>本文2</p>'
12    }, {
13      id: 3,
14      title: 'タイトル3',
15      content: '<p>本文3</p>'
16    }],
17    selectedPost: 0
18  }
19})

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

回答1件

ベストアンサー

最初に表示されない理由はselectedPostの中身がNumberの0だからです。
それに～.titleのようにオブジェクトの参照をしても当然値は存在しません。

色々やり方はあると思いますが、以下のようにcomputedを使ったやり方が分かりやすいかと思います。

動作デモ → https://jsfiddle.net/b768m59s/

html
1<div id="dynamic-component-demo">
2  <div class="posts-tab">
3    <ul class="posts-sidebar">
4      <li v-for="(post, index) in posts" v-bind:key="post.id" v-on:click="selectedNumber = index">
5        {{ post.title }}
6      </li>
7    </ul>
8    <div class="selected-post-container">
9      <div class="selected-post">
10        <h3>{{ selectedPost.title }}</h3>
11        <div v-html="selectedPost.content"></div>
12      </div>
13    </div>
14  </div>
15</div>

JavaScript
1new Vue({
2  el: '#dynamic-component-demo',
3  data: {
4    posts: [{
5      id: 1,
6      title: 'タイトル1',
7      content: '<p>本文1</p>'
8    }, {
9      id: 2,
10      title: 'タイトル2',
11      content: '<p>本文2</p>'
12    }, {
13      id: 3,
14      title: 'タイトル3',
15      content: '<p>本文3</p>'
16    }],
17    selectedNumber: 0
18  },
19  computed: {
20    selectedPost() {
21      return this.posts[this.selectedNumber]
22    }
23  }
24})