JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.js"></script>
<div id="app">
<selection v-model="post"></selection>
<div v-if="post">
selected post:
{{post.title}}
</div>
<div v-else>
no posts
</div>
</div>
JavaScript
Vue.component('selection', {
template: "<select v-model='post'><option v-for='post in posts' v-bind:value='post'>{{post.title}}<option></select>",
data: function() {
return {
posts: [{
title: "lorem ipsum 1", val: '1' }, {
title: "lorem ipsum 2", val: '2' }, {
title: "lorem ipsum 3", val: '3' }
],
post: null
}
},
watch: {
post: function() {
/* this.$emit('input', this.post); */
}
},
props: ['value']
});
new Vue({
el: "#app",
data: {
post: null
}
});