Path

Retrieve object value based on string path

Parameters

import { usePath } from "vue-composable"; const value = usePath(source, path, separator?, notFoundReturn); 

Parameters	Type	Required	Default	Description
source	Object|Ref<Object>	true		Object source
path	String|Ref<String>	true		string path to value
separator	String	false	.	path separator
notFoundReturn	Function	false		Not found or invalid path handler

State

The usePath function exposes the following reactive state:

import { usePath } from "vue-composable"; const name = usePath({ user: { name: "test" } }, "user.name"); // or typed const name = usePath<string>({ user: { name: "test" } }, "user.name"); 

State	Type	Description
name	Ref<T>	Readonly ref with the object value for the path

Access

const o = { a: { a: 1, b: [ 2, { c: { ["a-b-c-d"]: 3 } } ] } }; usePath(o, "a[a]"); // result: 1 | equivalent: a.a usePath(o, "[a]['a']"); // result: 1 | equivalent: a.a usePath(o, '["a"][`b`][0]'); // result: 2 | equivalent: a.b["0"] usePath(o, "a.b[1].c[a-b-c-d]"); // result: 3 | equivalent: a.b[1].c["a-b-c-d"] 

Limitations

The access in [] is limited to this regex expression:

 /\[[`'"]?([^`'"\]]*)[`'"]?\]/g 

If you want to improve this, please raise an issue (opens new window) or create a PR (opens new window)

Example

Path example

Path:

Object

Value:

Code

<template> <div id="format"> <div> <h4>Path example</h4> <div> Path: <input v-model="inputPath" /> </div> <div> <p>Object</p> <textarea v-text="json" /> </div> <div> <p>Value:</p> <textarea v-text="inputValue" disabled /> </div> </div> </div> </template> <script> import { ref, defineComponent, computed } from "@vue/composition-api"; import { usePath } from "vue-composable"; export default defineComponent({ name: "path-example", setup() { const inputPath = ref("user.name"); const json = ref(JSON.stringify({ user: { name: "test" } })); const inputValue = usePath( computed(() => JSON.parse(json.value)), inputPath, ".", () => "Not Found" ); return { inputPath, json, inputValue }; } }); </script>