VueJS Todo + Firebase + Bootrap 4

index.html

<div id="app" class="center">
  <div class="container">
    <header>
      <ul class="nav nav-pills nav-justified">
        <li class="nav-item ">
          <a class="nav-link active red" href="#"> {{numberTodo}}</a>
        </li>
      </ul>
    </header>
    <main class="">
      <div class="">
        <br>
        <div class="card rounded">
        <br>
          <input class="form-control" v-model.trim="newTodoText" @keyup.enter="addTodo" placeholder="Thêm việc cần làm, rồi nhập Enter">
    
          <ul is="transition-group">
            <li v-for="(todo, index) in todos" :key="todo['.key']" class="user">
              <div class="row">
                <div class="col-lg-12">
                  <div class="input-group animated slideInDown" >
                    <span class="input-group-btn" >
        <button class="btn btn-success" type="button">{{index+1e0}}</button>
      </span>
                    <input  type="text" :value="todo.text" class="form-control" @input="updateTodoText(todo, $event.target.value)" placeholder="">
                    <span class="input-group-btn">
        <button title="Bấm để xóa" class="btn btn-danger" type="button" @click="removeTodo(todo)">Xóa</button>
      </span>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </main>
  </div>
 
  <hr>
  <nav style="color: white">Bùi Khương Duy &#8482; 2017 </nav>
  <hr>
</div>

script.babel

var db = firebase.initializeApp({
  databaseURL: 'https://tienganh-66025.firebaseio.com/'
}).database()
var todosRef = db.ref('todos')

var vm = new Vue({
  el: '#app',
  data() {
    return {
      newTodoText: '',
      numberTodo: 'Đang tải ...'
    }
  },
  firebase() {
    return {
      todos: todosRef.limitToLast(25),
      number: db.ref('nuberTodo')
    }

  },
  beforeMount() {
    todosRef.on('value', (snap) => {
      vm.numberTodo = snap.numChildren();
      vm.numberTodo = `Danh sách hiện tại là: ${vm.numberTodo} công việc`;
    });

  },
  methods: {
    addTodo: function() {
      console.log(this.newTodoText)
      if (this.newTodoText) {
        console.log(vm.numberTodo)
        todosRef.push({
          text: this.newTodoText
        })
        this.newTodoText = ''
      }
    },
    updateTodoText: function(todo, newText) {
      todosRef.child(todo['.key']).child('text').set(newText)
    },
    removeTodo: function(todo) {
      swal({
          title: "Cảnh báo",
          text: "Bạn không thể khôi phục lại sau khi xóa, hãy có muốn xóa!",
          type: "warning",
          showCancelButton: true,
          confirmButtonColor: "#DD6B55",
          cancelButtonText: 'Hủy',
          confirmButtonText: "Đúng, tôi muốn xóa!",
          closeOnConfirm: false
        },
        function() {
          todosRef.child(todo['.key']).remove()
          swal("Đã xóa!", "", "success");
        });

    }
  }
});

scripts

<script src="https://www.gstatic.com/firebasejs/3.7.2/firebase.js"></script>
<script src="https://unpkg.com/vue@2.2.4/dist/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<script src="https://unpkg.com/vuefire@1.3.1"></script>

style.css

body {
 background-image: url("http://wallpapershome.com/images/pages/pic_hs/3960.jpg");
}

.center {
  text-align: center !important;
}

ul {
  padding: 0;
}

.user {
  
  padding: 5px;
  overflow: hidden;
  transition: all .3s ease;
}


.v-enter,
.v-leave-active {
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top-width: 0;
  border-bottom-width: 0;
}

.errors {
  color: #f00;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />

vuejs-todo-firebase-bootrap-4.markdown

VueJS Todo + Firebase + Bootrap 4

A Pen by Cu Duy on CodePen.

License.