+ Add v-model support on Vue component.

Author: LancerComet

lib/directives/v-model.ts

@@ -181,7 +181,17 @@ const dealWithVModel = (
 
   // v-model on component.
   if (!isHTMLElement) {
-    // TODO: Add component support.
+    const instance = getCurrentInstance()
+    vNodeData.props.value = isString(bindingTarget)
+      ? instance[bindingTarget]
+      : bindingTarget.value
+    vNodeData.on.input = (value) => {
+      if (isString(bindingTarget)) {
+        instance[bindingTarget] = value
+      } else {
+        bindingTarget.value = value
+      }
+    }
   }
 }
 

test/v-model.composition.spec.tsx

@@ -108,15 +108,17 @@ describe('v-model composition API testing.', () => {
     expect(checkboxInputElement.checked).toBe(false)
 
     // input -> value
+    checkboxInputElement.checked = true
     checkboxInput.trigger('change')
     await sleep(10)
-    expect(userInputRef.value).toBe('on')
     expect(checkboxInputElement.checked).toBe(true)
+    expect(userInputRef.value).toBe('on')
 
+    checkboxInputElement.checked = false
     checkboxInput.trigger('change')
     await sleep(10)
-    expect(userInputRef.value).toBe(undefined)
     expect(checkboxInputElement.checked).toBe(false)
+    expect(userInputRef.value).toBe(undefined)
 
     // value -> input
     userInputRef.value = 'on'

test/v-model.render.spec.tsx

@@ -117,11 +117,13 @@ describe('v-model render function testing.', () => {
     expect(checkboxInputElement.checked).toBe(false)
 
     // input -> value
+    checkboxInputElement.checked = true
     checkboxInput.trigger('change')
     await sleep(10)
     expect(vm.userInput).toBe('on')
     expect(checkboxInputElement.checked).toBe(true)
 
+    checkboxInputElement.checked = false
     checkboxInput.trigger('change')
     await sleep(10)
     expect(vm.userInput).toBe(undefined)