A set of utility methods to update Vue reactive objects, using the dot notation path syntax.

vue-set-path methods can be used to set and delete

• properties of the data object in a Vue instance
• Vuex state properties
• Vue.observable properties

All the methods use their Vue equivalents (Vue.set and Vue.delete) under the hood, in order to retain reactivity.

npm install vue-set-path

import Vue from 'vue'
import { setOne, setMany, deleteOne, deleteMany } from 'vue-set-path'

const obj = Vue.observable({})

setOne(obj, 'foo.bar.baz', 'New value')
// This will set obj.foo.bar.baz to 'New value'
// If intermediate objects don't exist they will get automatically created

setMany(obj, {
  'foo.bar.baz', 'New value',
  'qux': 'Another value'
})
// The same as setOne, but uses a map of path/values to set multiple properties

deleteOne(obj, 'foo.bar.baz')
// Deletes the foo.bar.baz property

deleteMany(obj, ['foo.bar.baz', 'qux'])
// The same as deleteOne, but uses an array of paths to delete many properties at once

Sets a reactive value on an object property or an array element.
Non-existent paths will be be initialized automatically.

• setOne(object, path, value)

• object (Object | Array): The data object/array that we're changing.
• path (string): The path of the data we're changing, e.g.
  • user
  • user.name
  • user.friends[1] or user.friends.1
• value (any): The value we're changing it to. Can be a primitive or an object (or array).

Sets one or many a reactive properties by using either path, value or a map of path: value pairs.

• setMany(object, path, value)
• setMany(object, map)

• object (Object | Array): The data object/array that we're changing.
• path (string): The path of the data we're changing, e.g.
  • user
  • user.name
  • user.friends[1] or user.friends.1
• value (any): The value we're changing it to. Can be a primitive or an object (or array).
• map (Object): A map of path: value pairs.

Deletes a property of an object or the element of an array.

• deleteOne(object, path)

• object (Object | Array): The data object/array that we're deleting a property from.
• path (string): The path of the property that we're deleting, e.g.
  • user
  • user.name
  • user.friends[1] or user.friends.1

Deletes one or many properties and/or array elements by using an array of paths.

• deleteMany(object, path)
• deleteMany(object, array)

• object (Object | Array): The data object/array that we're deleting properties from.
• path (string): The path of the property that we're deleting, e.g.
  • user
  • user.name
  • user.friends[1] or user.friends.1
• array (Array): An array of paths to delete.

IE / Edge	Firefox	Chrome	Safari	Opera
IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions