`useVModelObject`

This is a new function proposal.

This function is a helps implementing v-model="obj".

Usage

<template>
  <div>
    <input v-model="a" type="text" />
    <input v-model="b" type="text" />
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, watch } from 'vue'
import { useVModelObject } from './useVModelObject'

export default defineComponent({
  props: {
    modelValue: {
      type: Object as PropType<{ a: string, b: string }>,
      required: true
    }
  },
  setup(props) {
    const data = useVModelObject(props)
    return { ...data }
  }
})
</script>

Sample implementation

import { computed, getCurrentInstance, WritableComputedRef } from 'vue'

export const useVModelObject = <P, K extends keyof P>(
  props: P,
  key = 'modelValue' as K,
  emit?: (name: string, ...args: any[]) => void
): { [KK in keyof P[K]]: WritableComputedRef<P[K][KK]> } => {
  const vm = getCurrentInstance()
  const _emit = emit ?? vm!.emit

  const computedObject: any = {}
  for (const k of Object.keys(props[key])) {
    computedObject[k] = computed({
      get() {
        return (props[key] as any)[k]
      },
      set(v) {
        _emit(`update:${key}`, { ...props[key], [k]: v })
      }
    })
  }
  return computedObject
}

[sapphi-red]

Extending toRefs sounds great. I will make a PR.

[Tahul]

I really like the idea.

The “toNestedRefs” naming seem pretty clear to me.

I really love the idea of “extending” the toRefs() function too.