Merge pull request #1818 from karevn/dev

Reverse filters support for v1.0

Author: yyx990803

src/directives/public/for.js

@@ -485,6 +485,7 @@ module.exports = {
    */
 
   _postProcess: function (value) {
+    this.processedValue = value
     if (_.isArray(value)) {
       return value
     } else if (_.isPlainObject(value)) {
@@ -522,9 +523,25 @@ module.exports = {
         frag.destroy()
       }
     }
+  },
+
+  _syncChanges: function (scope, value) {
+    // two-way sync for v-for alias
+    var subjectValue = this.filters ? this.processedValue
+      : this.rawValue
+    if (scope.$key) { // original is an object
+      subjectValue[scope.$key] = value
+    } else {
+      subjectValue.$set(scope.$index, value)
+    }
+    if (this.filters) {
+      var vm = this._scope || this.vm
+      var reverseValue = vm._applyFilters(subjectValue,
+        subjectValue, this.filters, true)
+      vm.$set(this.expression, reverseValue)
+    }
   }
 }
-
 /**
  * Helper to find the previous element that is a fragment
  * anchor. This is necessary because a destroyed frag's

src/instance/misc.js

@@ -39,6 +39,17 @@ exports._applyFilters = function (value, oldValue, filters, write) {
   return value
 }
 
+exports._syncChanges = function (value, expression) {
+  // two-way sync for v-for alias
+  var forContext = this.$forContext
+  if (forContext && forContext.alias === expression) {
+    var self = this
+    forContext._withLock(function () {
+      forContext._syncChanges(self, value)
+    })
+  }
+}
+
 /**
  * Resolve a component, depending on whether the component
  * is defined normally or using an async factory function.

src/watcher.js

@@ -143,27 +143,7 @@ Watcher.prototype.set = function (value) {
       )
     }
   }
-  // two-way sync for v-for alias
-  var forContext = scope.$forContext
-  if (forContext && forContext.alias === this.expression) {
-    if (forContext.filters) {
-      process.env.NODE_ENV !== 'production' && _.warn(
-        'It seems you are using two-way binding on ' +
-        'a v-for alias (' + this.expression + '), and the ' +
-        'v-for has filters. This will not work properly. ' +
-        'Either remove the filters or use an array of ' +
-        'objects and bind to object properties instead.'
-      )
-      return
-    }
-    forContext._withLock(function () {
-      if (scope.$key) { // original is an object
-        forContext.rawValue[scope.$key] = value
-      } else {
-        forContext.rawValue.$set(scope.$index, value)
-      }
-    })
-  }
+  scope._syncChanges(value, this.expression)
 }
 
 /**

test/unit/specs/directives/public/for/for_spec.js

@@ -730,19 +730,32 @@ if (_.inBrowser) {
       }
     })
 
-    it('warn v-model on alias with filters', function () {
+    it('v-model on alias with filters', function (done) {
       var vm = new Vue({
         el: el,
         template:
-          '<div v-for="item in items | orderBy \'item\'">' +
-            '<input v-model="item">' +
+          '<div v-for="item in items | filter">' +
+            '<input v-model="item">{{item}}' +
           '</div>',
         data: {
-          items: ['a', 'b']
+          items: 'a, b'
+        },
+        filters: {
+          filter: {
+            read: function (value) { return value.split(', ') },
+            write: function (value) {
+              return value.join(', ')
+            }
+          }
         }
       })
-      trigger(vm.$el.querySelector('input'), 'input')
-      expect(hasWarned(_, 'It seems you are using two-way binding')).toBe(true)
+      var input = vm.$el.querySelector('input')
+      input.value = 'c'
+      trigger(input, 'input')
+      _.nextTick(function () {
+        expect(vm.items).toBe('c, b')
+        done()
+      })
     })
 
     it('nested track by', function (done) {