<div id="main">
	<h1>WordPress Posts in Vue.js</h1>
	<div class="post">
		<h2 class="post-title">Latest Post Status Posts</h2>
		<p>I wanted to show as simple of a Vue.js app as possible, using WordPress post data. I recently did something similar with React, which you can <a href="https://codepen.io/krogsgard/pen/NRBqPp/">check out</a>.</p>
		<p>I used the Vue.js <a href="https://vuejs.org/examples/commits.html">Github commits example</a> as my primary guide for this demo.</p>
		<p>If you fork this Pen, you can swap out the URL from Post Status to your own website, if it's running <a href="http://v2.wp-api.org">v2 of the WordPress REST API</a>, or WordPress Trunk (developer version).</p>
		<p>The author and featured image data is made available thanks to the <code>?_embed</code> query string, which adds additional information to the return data: author, media, terms, and comments are all included, for example.</p>
		<p>The query for the following posts looks like this: <br>
			<pre>https://poststatus.com/wp-json/wp/v2/posts/?_embed&per_page=3&author=</pre>
			</code>
	<p>The biggest change between this demo and the React demo is this one adds the author toggle, so you can get an idea for using more dynamic data.</p>
	</div>
	<div id="app">
		<div class="author-toggle-wrap post">
			<template v-for="author in authors">
				<div class="author-toggle">
					<input type="radio"
						:id="author"
						:value="author"
						name="author"
						v-model="currentAuthor">
					<label :for="author">Author ID: {{ author }}</label>
				</div>
			</template>
			
		</div>
		
		<div class="post-wrapper">
			<p>Current Author: <code>{{ currentAuthor }}</code></p>
			<template v-for="post in posts">
				<div class="post">
					<h2 class="post-title" v-html="post.title.rendered"></h2>
					<a v-if="post._embedded['wp:featuredmedia'][0].media_details.sizes['large']" :href="post.link">
						<img :src="post._embedded['wp:featuredmedia'][0].media_details.sizes['large'].source_url" />
					</a>
					<div class="excerpt" v-if="post.excerpt.rendered" v-html="post.excerpt.rendered"></div>
					<div class="entry-meta" v-if="post._embedded.author[0]">
						<a class="author-wrap" :href="post._embedded.author[0].link"><img class="avatar" :src="post._embedded.author[0].avatar_urls['48']" />by&nbsp; {{ post._embedded.author[0].name }} </a>
						<a class="button read-more" :href="post.link">Read More &raquo;</a>
					</div>
				</div>
			</template>
		</div>
	</div>
	<div class="notes">
		<div class="post">
			<h2 class="post-title">Notes</h2>
			<p>For the featured image, if you don't want to reference a specific size, you could call <code>post._embedded['wp:featuredmedia'][0].source_url</code> instead of <code>post._embedded['wp:featuredmedia'][0].media_details.sizes["large"].source_url</code>				and the full size image would be returned. You can also replace the large size with other image sizes. I used the syntax shown in case your image size has a hyphen in it.</p>
			<p>Additionally, you can change the post type to something like <code>pages</code> or a custom post type to see more results.</p>
			<p>To change other things, like <code>per_page</code> and <code>author</code>, just add or adjust the appropriate query parameters.</p>
			<p>There are a few potential "gotchas" if you run into an error. The fallback logic is probably better in this than the React version, because I was better able to understand <code>v-if</code> than React conditional logic, but I haven't spent much time with Vue.js at all, so there could be some issues here.</p>
		</div>
	</div>
</div>