[Vuejs]-Vue 3 clean up props before use

by

1👍

You may use the following function to unjson all props:

import { computed, toRefs, Ref } from 'vue'

export function unjsonProps<T extends object>(props: T): { [K in keyof T]: Exclude<T[K], string> } {
  const refs = toRefs(props);
  return Object.fromEntries(
    Object.entries<Ref>(refs)
      .map(([k, r]) => [k, computed(() => typeof r.value === 'string' ? JSON.parse(r.value) : r.value)])
  ) as any
}

const props = defineProps(...)
const properProps = unjsonProps(props) // the same object with parsed strings

// unjsonProps.js
import { computed, toRefs } from 'vue';
export function unjsonProps(props) {
    const refs = toRefs(props);
    return Object.fromEntries(Object.entries(refs)
        .map(([k, r]) => [k, computed(() => typeof r.value === 'string' ? JSON.parse(r.value) : r.value)]));
}
// unjsonProps.d.ts
export declare function unjsonProps<T extends object>(props: T): {
    [K in keyof T]: Exclude<T[K], string>;
};
👤Dimava

Leave a comment