@tresinternet/vue3-mutable-model-value

A composable to make a prop.modelValue mutable in the component VueJS

This composable solves the issue of having a modelValue that can be changed in multiple ways. Instead of capturing all the ways the modelValue can be changed and emitting update:modelValue, this allows you to use the mutableModelValue (from calling the composable) to update that variable, automatically resulting in an emit of modelValue, and always get the newest value of the variable because it always returns the value of props.modelValue.

By default this composable assumes you are using modelValue as the property of props. You can also use a custom property by providing the property name as the third parameter in the useMutableModelValue call. This will result in the composable using that property from props to decide its value and emit update:[custom property name] instead of update:modelValue. (so make sure your defineEmits contains that emit)

Installation

Using npm

npm install @tresinternet/vue3-mutable-model-value

Usage

Default usage

<script setup>

const props = defineProps({
	modelValue: {
		type: Object as () => ExampleObject,
		default: null,
	},
})

const emit = defineEmits(['update:modelValue'])

const { mutableModelValue } = useMutableModelValue<ExampleObject>(props, emit)

</script>

Usage with custom property

<script setup>

const props = defineProps({
	exampleProp: {
		type: Object as () => ExampleObject,
		default: null,
	},
})

const emit = defineEmits(['update:exampleProp'])

const { mutableModelValue } = useMutableModelValue<ExampleObject>(props, emit, 'exampleProp')

</script>