fix(v-model): should use dynamic directive on input with dynamic v-bind

This commit is contained in:
Evan You
2020-02-05 15:21:47 -05:00
parent ae92925011
commit 1f2de9e232
6 changed files with 72 additions and 11 deletions

View File

@@ -1,5 +1,42 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`compiler: transform v-model input w/ dynamic v-bind 1`] = `
"const _Vue = Vue
return function render() {
with (this) {
const { vModelDynamic: _vModelDynamic, mergeProps: _mergeProps, createVNode: _createVNode, withDirectives: _withDirectives, createBlock: _createBlock, openBlock: _openBlock } = _Vue
return (_openBlock(), _withDirectives(_createBlock(\\"input\\", _mergeProps(obj, {
modelValue: model,
\\"onUpdate:modelValue\\": $event => (model = $event)
}), null, 16 /* FULL_PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]), [
[_vModelDynamic, model]
]))
}
}"
`;
exports[`compiler: transform v-model input w/ dynamic v-bind 2`] = `
"const _Vue = Vue
return function render() {
with (this) {
const { vModelDynamic: _vModelDynamic, createVNode: _createVNode, withDirectives: _withDirectives, resolveDirective: _resolveDirective, createBlock: _createBlock, openBlock: _openBlock } = _Vue
const _directive_bind = _resolveDirective(\\"bind\\")
return (_openBlock(), _withDirectives(_createBlock(\\"input\\", {
modelValue: model,
\\"onUpdate:modelValue\\": $event => (model = $event)
}, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]), [
[_directive_bind, val, key],
[_vModelDynamic, model]
]))
}
}"
`;
exports[`compiler: transform v-model modifiers .lazy 1`] = `
"const _Vue = Vue

View File

@@ -63,6 +63,19 @@ describe('compiler: transform v-model', () => {
expect(generate(root).code).toMatchSnapshot()
})
test('input w/ dynamic v-bind', () => {
const root = transformWithModel('<input v-bind="obj" v-model="model" />')
expect(root.helpers).toContain(V_MODEL_DYNAMIC)
expect(generate(root).code).toMatchSnapshot()
const root2 = transformWithModel(
'<input v-bind:[key]="val" v-model="model" />'
)
expect(root2.helpers).toContain(V_MODEL_DYNAMIC)
expect(generate(root2).code).toMatchSnapshot()
})
test('simple expression for select', () => {
const root = transformWithModel('<select v-model="model" />')

View File

@@ -3,7 +3,8 @@ import {
DirectiveTransform,
ElementTypes,
findProp,
NodeTypes
NodeTypes,
hasDynamicKeyVBind
} from '@vue/compiler-core'
import { createDOMCompilerError, DOMErrorCodes } from '../errors'
import {
@@ -75,6 +76,10 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
break
}
}
} else if (hasDynamicKeyVBind(node)) {
// element has bindings with dynamic keys, which can possibly contain
// "type".
directiveToUse = V_MODEL_DYNAMIC
} else {
// text type
__DEV__ && checkDuplicatedValue()