Semantic Todo - Vue.js

index.html

<div class="ui container top">
<div class="ui raised pink segment center aligned">
  <h1 class="ui header">TodoList - Semantic UI + Vue.js</h1>
</div>
  <div class="ui divider"></div>
<div class="uialigned two column grid centered stackable" id="app">
  <div class="row">
    <div class=" column">
      <div class="ui segments">
        <div class="ui segment" v-for="(todo,index) in todos"> {{todo.name}} <i class="remove icon large" @click="removeTodo(index)"></i></div>
      </div>
    </div>
  </div>
<!--   <div class="row"> -->
    <div class=" column">
      <div class="ui action fluid input">
        <input type="text" placeholder="Add new todo..." v-model.trim="newItem">
        <button class="ui button" @click="addTodo">Add Todo</button>
      </div>
    </div>
  </div>
</div>

script.js

var todos = [{
    name: 'Learn React',
    done: false
  }, {
    name: 'Learn Vue',
    done: true
  }, {
    name: 'Compare the two',
    done: true
  }, {
    name: 'Go crazy',
    done: true
  },

];

var vm = new Vue({
  el: '#app',
  data: {
    todos,
    newItem: ''
  },
  methods: {
    removeTodo: function(index) {
      this.todos.splice(index, 1);
    },
    addTodo: function() {
      if (this.newItem) {
        this.todos.push({name: this.newItem,done: false});
        this.newItem = '';
      }
    },
  }
})

scripts

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

semantic-todo-vue-js.markdown

Semantic Todo - Vue.js

Todo list demonstrating Vue.js integrated with beautiful Semantic-ui lib.

A Pen by mostafa on CodePen.

License.

style.css

.top{
  margin-top: 2em;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css" rel="stylesheet" />