example 03 lodash(angular-reactjs-vuejs-quickstart-comparison)

by hasandag

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<div id="app">
  <input type="text" v-model="userInput">
  <button v-on:click="addTodo">Add Todo</button>
  <ul>
    <li v-for="todo in todos" v-on:click="removeTodo(todo)">{{ todo.value }}</li>
  </ul>
</div>

JavaScript

new Vue({
  el: "#app",
  data: {
    todos: [],
    userInput: ""
  },
  methods: {
    addTodo: function() {
      if (this.userInput.trim() == "") {
        return;
      }
      var newTodo = { id: _.uniqueId(), value: this.userInput };
      this.todos.push(newTodo);
      this.userInput="";
      console.log(this.todos);
    },
    removeTodo(todo) {
      var id = todo.id;
      for (i = 0; i < this.todos.length; i++) {
        if (this.todos[i].id == id) {
          this.todos.splice(i, 1);
          break;
        }
      }
    }
  }
});