<template>
  <div class="col-md-12 contain nopadding">
  	<note-sidebar :notes="notes" @noteCreated="noteSelected"></note-sidebar>
  	<note-editor :note="activeNote"/>
  </div>

</template>
<script>
import NoteEditor from './NoteEditor.vue';
import NoteSidebar from './NoteSidebar';

import _ from 'lodash';


export default {
  name: 'note-app',
  components:{
  	NoteEditor,
  	NoteSidebar
  },
  // computed: {
  // 		activeNote:_.first(this.notes)
  // },
  data: () => ({
  	notes:[
  	{
  		'title':'The base',
  		'content':'base Stuffs'
  	},
  	{
  		'title':'The House',
  		'content':'base Stuffs'
  	},
  	{
  		'title':'The Action',
  		'content':'base Stuffs'
  	}
  	],
  	activeNote:_.first([
  	{
  		'title':'The base',
  		'content':'base Stuffs'
  	},
  	{
  		'title':'The House',
  		'content':'base Stuffs'
  	},
  	{
  		'title':'The Action',
  		'content':'base Stuffs'
  	}
  	])
  }),

  methods:{
  	noteSelected: function(value){
  		this.activeNote = value;
  	}
  },

  created() {
    //do something after creating vue instance
    // this.notes =

  }
}
</script>
<style lang="scss" scoped>
</style>