下記のようなVue.jsのコンポーネントに格納したデータ(posts)をforで回して表示するコードを書いたのですが、
表示した後で、ChromeのConsoleから各データにアクセスする方法を探しています。
例えば、
archiveList.data
とConsoleに入力すると、functionの内容が表示されますが、postsの中のデータに直接アクセスし、値を表示させる方法はあるのでしょうか?
JavaScript
1var archiveList = { 2 data: function () { 3 return { 4 posts: 5 [ 6 { id: 1, title: 'My journey with Vue', content: 'This is content 1' }, 7 { id: 2, title: 'Blogging with Vue', content: 'This is content 2' }, 8 { id: 3, title: 'Why Vue is so fun', content: 'This is content 3' } 9 ] 10 } 11 }, 12 template: ` 13 <section> 14 <div v-for="post in posts"> 15 <header> 16 <span>Post ID: <strong>{{ post.id }}</strong></span> 17 <h1>{{ post.title }}</h1> 18 </header> 19 <article> 20 <p>{{ post.content }}</p> 21 </article> 22 <hr /> 23 </div> 24 </section> 25 ` 26} 27var blogArchive = new Vue({ 28 el: '#blog-archive', 29 components: { 30 'archive-list': archiveList 31 } 32});
HTML
1<div id="blog-archive"> 2 <archive-list></archive-list> 3</div>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/25 16:43
2019/07/25 16:43