revert vuejs#3217 and warn v-for + v-if mixed usage (fix vuejs#3754)

yyx990803 · yyx990803 · commit aacf90a13f8f · 2016-09-27T15:39:15.000-04:00
diff --git a/src/compiler/compile.js b/src/compiler/compile.js
@@ -674,7 +674,7 @@ function makeTerminalNodeLinkFn (el, dirName, value, options, def, rawName, arg,
     def: def
   }
   // check ref for v-for, v-if and router-view
-  if (dirName === 'for' || dirName === 'if' || dirName === 'router-view') {
+  if (dirName === 'for' || dirName === 'router-view') {
     descriptor.ref = findRef(el)
   }
   var fn = function terminalNodeLinkFn (vm, el, host, scope, frag) {
diff --git a/src/directives/public/for.js b/src/directives/public/for.js
@@ -35,6 +35,15 @@ const vFor = {
   ],
 
   bind () {
+    if (process.env.NODE_ENV !== 'production' && this.el.hasAttribute('v-if')) {
+      warn(
+        `<${this.el.tagName.toLowerCase()} v-for="${this.expression}" v-if="${this.el.getAttribute('v-if')}">: ` +
+        `Using v-if and v-for on the same element is not recommended - ` +
+        `consider filtering the source Array instead.`,
+        this.vm
+      )
+    }
+
     // support "item in/of items" syntax
     var inMatch = this.expression.match(/(.*) (?:in|of) (.*)/)
     if (inMatch) {
diff --git a/src/directives/public/if.js b/src/directives/public/if.js
@@ -41,10 +41,8 @@ export default {
     if (value) {
       if (!this.frag) {
         this.insert()
-        this.updateRef(value)
       }
     } else {
-      this.updateRef(value)
       this.remove()
     }
   },
@@ -79,29 +77,6 @@ export default {
     }
   },
 
-  updateRef (value) {
-    var ref = this.descriptor.ref
-    if (!ref) return
-    var hash = (this.vm || this._scope).$refs
-    var refs = hash[ref]
-    var key = this._frag.scope.$key
-    if (!refs) return
-    if (value) {
-      if (Array.isArray(refs)) {
-        refs.push(findVmFromFrag(this._frag))
-      } else {
-        refs[key] = findVmFromFrag(this._frag)
-      }
-    } else {
-      if (Array.isArray(refs)) {
-        refs.$remove(findVmFromFrag(this._frag))
-      } else {
-        refs[key] = null
-        delete refs[key]
-      }
-    }
-  },
-
   unbind () {
     if (this.frag) {
       this.frag.destroy()
diff --git a/test/unit/specs/directives/public/for/for_spec.js b/test/unit/specs/directives/public/for/for_spec.js
@@ -1001,6 +1001,17 @@ describe('v-for', function () {
     })
     expect('Frozen v-for objects cannot be automatically tracked').toHaveBeenWarned()
   })
+
+  it('warn v-if and v-for mixed usage', () => {
+    new Vue({
+      el: document.createElement('div'),
+      template: '<div v-for="item in items" v-if="ok"></div>',
+      data: {
+        items: []
+      }
+    })
+    expect('consider filtering the source Array instead').toHaveBeenWarned()
+  })
 })
 
 /**
diff --git a/test/unit/specs/directives/public/if_spec.js b/test/unit/specs/directives/public/if_spec.js
@@ -432,77 +432,4 @@ describe('v-if', function () {
       done()
     })
   })
-
-  // GitHub issue #3204
-  it('update array refs', function (done) {
-    var vm = new Vue({
-      el: el,
-      template: '<foo v-if="!activeItem || $index === activeItem" v-ref:foo :index="$index" v-for="item in items"></foo>',
-      data: {
-        items: [0, 1, 2],
-        activeItem: null
-      },
-      components: {
-        foo: {
-          props: ['index'],
-          template: '<div>I am foo ({{ index }})<div>'
-        }
-      }
-    })
-    vm.$refs.foo.forEach(function (ref, index) {
-      expect(ref.$el.textContent).toBe('I am foo (' + index + ')')
-      expect(ref.index).toBe(index)
-    })
-    vm.activeItem = 1 // select active item
-    nextTick(function () {
-      expect(vm.$refs.foo.length).toBe(1)
-      expect(vm.$refs.foo[0].index).toBe(1)
-      vm.activeItem = null // enable all elements
-      nextTick(function () {
-        expect(vm.$refs.foo.length).toBe(3)
-        done()
-      })
-    })
-  })
-
-  it('update object refs', function (done) {
-    var vm = new Vue({
-      el: el,
-      template: '<foo v-if="!activeKey || $key === activeKey" v-ref:foo :key="$key" v-for="item in items"></foo>',
-      data: {
-        items: {
-          a: 1,
-          b: 2,
-          c: 3
-        },
-        activeKey: null
-      },
-      components: {
-        foo: {
-          props: ['key'],
-          template: '<div>I am foo ({{ key }})<div>'
-        }
-      }
-    })
-    Object.keys(vm.$refs.foo).forEach(function (key) {
-      var ref = vm.$refs.foo[key]
-      expect(ref.$el.textContent).toBe('I am foo (' + key + ')')
-      expect(ref.key).toBe(key)
-    })
-    vm.activeKey = 'b' // select active item
-    nextTick(function () {
-      expect(Object.keys(vm.$refs.foo).length).toBe(1)
-      expect(vm.$refs.foo['b'].key).toBe('b')
-      vm.activeKey = null // enable all elements
-      nextTick(function () {
-        expect(Object.keys(vm.$refs.foo).length).toBe(3)
-        Object.keys(vm.$refs.foo).forEach(function (key) {
-          var ref = vm.$refs.foo[key]
-          expect(ref.$el.textContent).toBe('I am foo (' + key + ')')
-          expect(ref.key).toBe(key)
-        })
-        done()
-      })
-    })
-  })
 })

Original file line number	Diff line number	Diff line change
`@@ -674,7 +674,7 @@ function makeTerminalNodeLinkFn (el, dirName, value, options, def, rawName, arg,`
`674`	`674`	`def: def`
`675`	`675`	`}`
`676`	`676`	`// check ref for v-for, v-if and router-view`
`677`		`- if (dirName === 'for' \|\| dirName === 'if' \|\| dirName === 'router-view') {`
	`677`	`+ if (dirName === 'for' \|\| dirName === 'router-view') {`
`678`	`678`	`descriptor.ref = findRef(el)`
`679`	`679`	`}`
`680`	`680`	`var fn = function terminalNodeLinkFn (vm, el, host, scope, frag) {`