Skip to content

Commit

Permalink
fix(compiler-dom):v-model can update correctly when the element is an…
Browse files Browse the repository at this point in the history
… input of type number (vuejs#7003)
  • Loading branch information
chenzhihui committed Nov 1, 2022
1 parent 3bed82b commit 4733a78
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 2 deletions.
54 changes: 54 additions & 0 deletions packages/runtime-dom/__tests__/directives/vModel.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,60 @@ describe('vModel', () => {
expect(data.value).toEqual(1)
})

it('should work with number input and be able to update rendering correctly', async () => {
const setValue1 = function (this: any, value: any) {
this.value1 = value
}
const setValue2 = function (this: any, value: any) {
this.value2 = value
}
const component = defineComponent({
data() {
return { value1: 1.002, value2: 1.002 }
},
render() {
return [
withVModel(
h('input', {
id:'input_num1',
type: 'number',
'onUpdate:modelValue': setValue1.bind(this)
}),
this.value1
),
withVModel(
h('input', {
id:'input_num2',
type: 'number',
'onUpdate:modelValue': setValue2.bind(this)
}),
this.value2
)
]
}
})
render(h(component), root)
const data = root._vnode.component.data

const inputNum1 = root.querySelector('#input_num1')!
expect(inputNum1.value).toBe('1.002')

const inputNum2 = root.querySelector('#input_num2')!
expect(inputNum2.value).toBe('1.002')

inputNum1.value = '1.00'
triggerEvent('input', inputNum1)
await nextTick()
expect(data.value1).toBe(1)

inputNum2.value = '1.00'
triggerEvent('input', inputNum2)
await nextTick()
expect(data.value2).toBe(1)

expect(inputNum1.value).toBe('1.00')
})

it('should work with multiple listeners', async () => {
const spy = jest.fn()
const component = defineComponent({
Expand Down
10 changes: 8 additions & 2 deletions packages/runtime-dom/src/directives/vModel.ts
Original file line number Diff line number Diff line change
Expand Up @@ -93,8 +93,14 @@ export const vModelText: ModelDirective<
}
}
const newValue = value == null ? '' : value
if (el.value !== newValue) {
el.value = newValue
if (el.type === 'number' && vnode.type === 'input') {
if (Number(el.value) !== newValue) {
el.value = newValue
}
} else {
if (el.value !== newValue) {
el.value = newValue
}
}
}
}
Expand Down

0 comments on commit 4733a78

Please sign in to comment.