packages/vuefire/examples/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>VueFire Todo App Demo</title>
    <script src="https://www.gstatic.com/firebasejs/8.1.2/firebase.js"></script>
    <script src="https://unpkg.com/vue@2"></script>
    <script src="../dist/vuefire.js"></script>
  </head>

  <body>
    <!--
      Before running this example, make sure to:

      1. cd path/to/vuefire
      2. npm install
      3. npm run build

      Then you can open this file in your browser.
      If you just prefer to see this example with
      the latest published version of VueFire, you
      play with the code in this fiddle:

      https://jsfiddle.net/posva/wtyop5jy/
    -->

    <div id="app">
      <button @click="toggleTodos">Toggle todos</button> <br />
      <input v-model.trim="newTodoText" @keyup.enter="addTodo" placeholder="Add new todo" />
      <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>

      <h4>collection with refs</h4>

      <ul>
        <li v-for="moment in moments">{{ moment }}</li>
      </ul>

      <h5>Original data</h5>

      <ul>
        <li v-for="tweet in tweets">{{ tweet }}</li>
      </ul>

      <p>config:</p>
      <pre>
        {{ config }}
      </pre>
    </div>

    <script>
      /* global Vue, firebase, Vuefire */
      Vue.use(Vuefire.firestorePlugin, { wait: true })
      var db = firebase
        .initializeApp({
          projectId: 'vue-fire-store',
          databaseURL: 'https://vue-fire-store.firebaseio.com',
        })
        .firestore()
      var todos = db.collection('todos')
      var unFinishedTodos = todos.where('finished', '==', false)
      var finishedTodos = todos.where('finished', '==', true)
      var config = db.collection('configs').doc('jORwjIykFo2NmkdzTkhU')

      var vm = new Vue({
        el: '#app',
        data: {
          todos: [],
          tweets: [],
          moments: [],
          nested: [],
          config: null,
          newTodoText: '',
        },

        firestore: {
          todos: unFinishedTodos,
          moments: db.collection('moments'),
          nested: db.collection('nested'),
          tweets: db.collection('tweets'),
          config: config,
        },

        methods: {
          addTodo: function() {
            if (this.newTodoText) {
              todos.add({
                finished: false,
                text: this.newTodoText,
                created: firebase.firestore.FieldValue.serverTimestamp(),
              })
              this.newTodoText = ''
            }
          },
          updateTodoText: function(todo, newText) {
            todos.doc(todo.id).update({ text: newText })
          },
          removeTodo: function(todo) {
            todos.doc(todo.id).delete()
          },
          toggleTodos: function() {
            console.log(this.$firestoreRefs.todos === unFinishedTodos)
            this.$bind(
              'todos',
              this.$firestoreRefs.todos === unFinishedTodos ? finishedTodos : unFinishedTodos
            )
          },
        },
      })
    </script>
  </body>
</html>