Avoid defining reactive twice

Fix vuejs#19

Author: posva

src/vuefire.js

@@ -100,6 +100,22 @@ function bind (vm, key, source) {
   }
 }
 
+/**
+ * Define a reactive property in a given vm if it's not defined
+ * yet
+ *
+ * @param {Vue} vm
+ * @param {string} key
+ * @param {*} val
+ */
+function defineReactive (vm, key, val) {
+  if (vm[key] === undefined) {
+    Vue.util.defineReactive(vm, key, val)
+  } else {
+    vm[key] = val
+  }
+}
+
 /**
  * Bind a firebase data source to a key on a vm as an Array.
  *
@@ -110,7 +126,7 @@ function bind (vm, key, source) {
  */
 function bindAsArray (vm, key, source, cancelCallback) {
   var array = []
-  Vue.util.defineReactive(vm, key, array)
+  defineReactive(vm, key, array)
 
   var onAdd = source.on('child_added', function (snapshot, prevKey) {
     var index = prevKey ? indexForKey(array, prevKey) + 1 : 0
@@ -151,7 +167,7 @@ function bindAsArray (vm, key, source, cancelCallback) {
  * @param {function|null} cancelCallback
  */
 function bindAsObject (vm, key, source, cancelCallback) {
-  Vue.util.defineReactive(vm, key, {})
+  defineReactive(vm, key, {})
   var cb = source.on('value', function (snapshot) {
     vm[key] = createRecord(snapshot)
   }, cancelCallback)

tests/vuefire.spec.js

@@ -86,6 +86,41 @@ describe('VueFire', function () {
       })
     })
 
+    it('bind using $bindAsArray after $unbind', function (done) {
+      var vm = new Vue({
+        template: '<div><div v-for="item in items">{{ item[".key"] }} {{ item.index }} </div></div>',
+        created: function () {
+          this.$bindAsArray('items', firebaseRef)
+        }
+      }).$mount()
+      var firebaseRefOther = firebaseApp.database().ref().child(helpers.generateRandomString())
+      firebaseRef.set({
+        first: { index: 0 },
+        second: { index: 1 },
+        third: { index: 2 }
+      }, function () {
+        expect(vm.items).to.deep.equal([
+          { '.key': 'first', index: 0 },
+          { '.key': 'second', index: 1 },
+          { '.key': 'third', index: 2 }
+        ])
+        vm.$unbind('items')
+        vm.$bindAsArray('items', firebaseRefOther)
+        firebaseRefOther.set({
+          a: { index: 0 },
+          b: { index: 1 },
+          c: { index: 2 }
+        }, function () {
+          expect(vm.items).to.deep.equal([
+            { '.key': 'a', index: 0 },
+            { '.key': 'b', index: 1 },
+            { '.key': 'c', index: 2 }
+          ])
+          done()
+        })
+      })
+    })
+
     it('binds array records which are primitives', function (done) {
       var vm = new Vue({
         firebase: {
@@ -531,6 +566,35 @@ describe('VueFire', function () {
       })
     })
 
+    it('binds with $bindAsObject after $unbind', function (done) {
+      var obj = {
+        first: { index: 0 },
+        second: { index: 1 },
+        third: { index: 2 }
+      }
+      var objOther = {
+        onlyOne: { index: 0 },
+        second: { index: 1 }
+      }
+      var vm = new Vue({
+        template: '<div>{{ items | json }}</div>',
+        created: function () {
+          this.$bindAsObject('items', firebaseRef.child('items'))
+        }
+      }).$mount()
+      firebaseRef.child('items').set(obj, function () {
+        obj['.key'] = 'items'
+        expect(vm.items).to.deep.equal(obj)
+        vm.$unbind('items')
+        vm.$bindAsObject('items', firebaseRef.child('others'))
+        firebaseRef.child('others').set(objOther, function () {
+          objOther['.key'] = 'others'
+          expect(vm.items).to.deep.equal(objOther)
+          done()
+        })
+      })
+    })
+
     it('binds with $bindAsObject', function (done) {
       var obj = {
         first: { index: 0 },