VuexFire Todo App Demo

https://github.com/posva/vuexfire

HTML

<script src="https://www.gstatic.com/firebasejs/3.7.4/firebase.js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>
<script src="https://unpkg.com/vuexfire"></script>

<div id="app">
  <select name="office" id="office" v-model="office" @change="setOffice($event.target.value)">
    <option value="">Select office</option>
    <<option v-for="todo in todos" v-bind:value="todo.text">{{todo.text}}</option>
  </select>
  <div>
    <input v-model.trim="newTodoText" @keyup.enter="addTodo" placeholder="Add new todo">
  </div>
  <ul>
    <li v-for="todo in todos">
      <input :value="todo.text" @input="updateTodoText(todo, $event.target.value)">
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>  
</div>

JavaScript

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

var store = new Vuex.Store({
  // VuexFire will check the type of the property to bind as an array or as
  // an object
  strict: true,
  state: {
    todos: []
  },
  mutations: VuexFire.firebaseMutations,
  getters: {
    todos: state => state.todos,
  },
  actions: {
    setTodosRef: VuexFire.firebaseAction(({
      bindFirebaseRef
    }, ref) => {
      bindFirebaseRef('todos', ref);      
    }),
    foobar: (foo) => console.log(foo)
  },
})

new Vue({
  el: '#app',
  store,
  computed: Vuex.mapGetters(['todos']),
  data: {
    newTodoText: '',
    office: ''
  },

  methods: {
    // Database manipulation are done directly here for the sake of simplicity, but it makes more sense to use actions instead
    removeTodo: function(todo) {
      todosRef.child(todo['.key']).remove()
    },
    addTodo: function() {
      if (this.newTodoText.trim()) {
        todosRef.push({
          text: this.newTodoText,
        })
        this.newTodoText = ''
      }
    },
    updateTodoText: function (todo, newText) {
      todosRef.child(todo['.key']).child('text').set(newText)
    },
    setOffice: function(office) {
      if (office !== '') {
      	this.$store.dispatch('setTodosRef', todosRef.orderByChild('text').equalTo(office));
      }
    	else {
      	this.$store.dispatch('setTodosRef', todosRef);
      }
    }
  },
  created() {
    this.$store.dispatch('setTodosRef', todosRef);
  }
})