ToDo App using Vue - Stage 1

by shivkumarganesh

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<h3>
Todo List
</h3>
<div id="app">
  <ol class="list-group">
    <list-item v-for="item in items" v-bind:todo="item" v-bind:key="item.id">
    </list-item>
  </ol>
  <input v-model="newItem"/>
</div>

JavaScript

Vue.component('list-item', {
  props: ['todo'],
  template: '<li class="list-group-item">{{todo.text}}</li>'
})
var app7 = new Vue({
  el: '#app',
  data: {
    items: [{
      text: 'Buy some fruits'
    }, {
      text: 'Get home early'
    }, {
      text: 'Find some stuff'
    },{
      text: 'Get some Oranges'
    },{
      text: 'Apply for leave'
    },{
      text: 'Get things working'
    }],
    newItem:''
  }
})