feat: warn non-existent v-model keys

Author: yyx990803

Diff for: src/compiler/directives/model.js

@@ -37,39 +37,44 @@ export function genAssignmentCode (
   value: string,
   assignment: string
 ): string {
-  const modelRs = parseModel(value)
-  if (modelRs.idx === null) {
+  const res = parseModel(value)
+  if (res.key === null) {
     return `${value}=${assignment}`
   } else {
-    return `$set(${modelRs.exp}, ${modelRs.idx}, ${assignment})`
+    return `$set(${res.exp}, ${res.key}, ${assignment})`
   }
 }
 
 /**
- * parse directive model to do the array update transform. a[idx] = val => $$a.splice($$idx, 1, val)
+ * parse directive model to do the array update transform. a[key] = val => $$a.splice($$key, 1, val)
  *
  * for loop possible cases:
  *
  * - test
- * - test[idx]
- * - test[test1[idx]]
- * - test["a"][idx]
- * - xxx.test[a[a].test1[idx]]
- * - test.xxx.a["asa"][test1[idx]]
+ * - test[key]
+ * - test[test1[key]]
+ * - test["a"][key]
+ * - xxx.test[a[a].test1[key]]
+ * - test.xxx.a["asa"][test1[key]]
  *
  */
 
 let len, str, chr, index, expressionPos, expressionEndPos
 
-export function parseModel (val: string): Object {
+type ModelParseResult = {
+  exp: string,
+  key: string | null
+}
+
+export function parseModel (val: string): ModelParseResult {
   str = val
   len = str.length
   index = expressionPos = expressionEndPos = 0
 
   if (val.indexOf('[') < 0 || val.lastIndexOf(']') < len - 1) {
     return {
       exp: val,
-      idx: null
+      key: null
     }
   }
 
@@ -85,7 +90,7 @@ export function parseModel (val: string): Object {
 
   return {
     exp: val.substring(0, expressionPos),
-    idx: val.substring(expressionPos + 1, expressionEndPos)
+    key: val.substring(expressionPos + 1, expressionEndPos)
   }
 }
 

Diff for: src/core/instance/init.js

@@ -8,7 +8,7 @@ import { initEvents } from './events'
 import { mark, measure } from '../util/perf'
 import { initLifecycle, callHook } from './lifecycle'
 import { initProvide, initInjections } from './inject'
-import { extend, mergeOptions, formatComponentName } from '../util/index'
+import { extend, mergeOptions, formatComponentName, checkKeyExistence } from '../util/index'
 
 let uid = 0
 
@@ -58,6 +58,13 @@ export function initMixin (Vue: Class<Component>) {
     initProvide(vm) // resolve provide after data/props
     callHook(vm, 'created')
 
+    // check v-model binding in parent context
+    if (process.env.NODE_ENV !== 'production' &&
+        this.$vnode &&
+        this.$vnode.data.model) {
+      checkKeyExistence(this.$parent, this.$vnode.data.model.expression)
+    }
+
     /* istanbul ignore if */
     if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
       vm._name = formatComponentName(vm, false)

Diff for: src/core/util/index.js

@@ -7,4 +7,5 @@ export * from './options'
 export * from './debug'
 export * from './props'
 export * from './error'
+export * from './model'
 export { defineReactive } from '../observer/index'

Diff for: src/core/util/model.js

@@ -0,0 +1,28 @@
+/* @flow */
+
+import { warn } from './debug'
+import { parseModel } from 'compiler/directives/model'
+
+export function checkKeyExistence (vm: Component, expression: string) {
+  const res = parseModel(expression)
+  // last key segment is dynamic and will be set with `$set`
+  if (res.key) return
+  const path = res.exp.split('.')
+  // root path is already checked against
+  if (path.length === 1) return
+  let val = vm
+  for (let i = 0; i < path.length; i++) {
+    const key = path[i]
+    if (!(key in val)) {
+      warn(
+        `v-model="${expression}" is bound to a property that does not exist ` +
+        `and will not be reactive. Declare the property in data to ensure ` +
+        `reactivity.`,
+        vm
+      )
+      break
+    } else {
+      val = val[key]
+    }
+  }
+}

Diff for: src/platforms/web/runtime/directives/model.js

@@ -5,7 +5,14 @@
 
 import { isTextInputType } from 'web/util/element'
 import { looseEqual, looseIndexOf } from 'shared/util'
-import { warn, isAndroid, isIE9, isIE, isEdge } from 'core/util/index'
+import {
+  warn,
+  isAndroid,
+  isIE9,
+  isIE,
+  isEdge,
+  checkKeyExistence
+} from 'core/util/index'
 
 /* istanbul ignore if */
 if (isIE9) {
@@ -20,6 +27,9 @@ if (isIE9) {
 
 export default {
   inserted (el, binding, vnode) {
+    if (process.env.NODE_ENV !== 'production') {
+      checkKeyExistence(vnode.context, binding.expression)
+    }
     if (vnode.tag === 'select') {
       setSelected(el, binding, vnode.context)
       el._vOptions = [].map.call(el.options, getValue)

Diff for: test/unit/features/directives/model-parse.spec.js

@@ -4,30 +4,30 @@ describe('model expression parser', () => {
   it('parse object dot notation', () => {
     const res = parseModel('a.b.c')
     expect(res.exp).toBe('a.b.c')
-    expect(res.idx).toBe(null)
+    expect(res.key).toBe(null)
   })
 
   it('parse string in brackets', () => {
     const res = parseModel('a["b"][c]')
     expect(res.exp).toBe('a["b"]')
-    expect(res.idx).toBe('c')
+    expect(res.key).toBe('c')
   })
 
   it('parse brackets with object dot notation', () => {
     const res = parseModel('a["b"][c].xxx')
     expect(res.exp).toBe('a["b"][c].xxx')
-    expect(res.idx).toBe(null)
+    expect(res.key).toBe(null)
   })
 
   it('parse nested brackets', () => {
     const res = parseModel('a[i[c]]')
     expect(res.exp).toBe('a')
-    expect(res.idx).toBe('i[c]')
+    expect(res.key).toBe('i[c]')
   })
 
   it('combined', () => {
-    const res = parseModel('test.xxx.a["asa"][test1[idx]]')
+    const res = parseModel('test.xxx.a["asa"][test1[key]]')
     expect(res.exp).toBe('test.xxx.a["asa"]')
-    expect(res.idx).toBe('test1[idx]')
+    expect(res.key).toBe('test1[key]')
   })
 })