with component

by Saurabh Mimani

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/accounting.js/0.4.1/accounting.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <post-form :post="post" v-model="post.category_id"></post-form>
  <pre>post = {{post}}</pre>
</div>

JavaScript

Vue.component('post-form', {
  template: '\
    <div>\
      <select :disabled="!(post.category_id && categories.length)"\
              @input="setCategoryId($event.target.value)">\
        <option v-for="cat in categories" :value="cat.id" :selected="cat.id == post.category_id">\
        {{cat.name}}\
        </option>\
      </select>\
    </div>\
  ',
  props: ['post'],
  data: function() {
    return {
      categories: []
    }
  },
  created: function() {
    setTimeout(() => {
      this.categories = [{
        id: 1,
        name: 'Cat 1'
      }, {
        id: 2,
        name: 'Cat 2'
      }, {
        id: 3,
        name: 'Cat 3'
      }]
    }, 1000)
  },
  methods: {
    setCategoryId: function(categoryId) {
      this.$emit('input', parseInt(categoryId))
    }
  }
})

new Vue({
  el: '#app',
  data: {
    post: {}
  },
  created: function() {
  	setTimeout(() => {
    	this.post = { category_id: 2 }
    }, 2000)
  }
})