Closed
Description
Bug description
I'm passing a prop called 'item' to a separate component containing a VInlineSelect.
Some of the fields inside this prop are null by default (default value in my database is null).
When passing this prop the the VInlineSelect component, the value of the field I'm using inside the component is changed from null to an empty string (on mount).
Resulting in watchers and @update:modelValue getting triggered on mount, when the value isn't actually getting changed by the user.
This (as far is I know) not the default behavior of the v-select component.
Steps to reproduce
- Create a component with a VInlineSelect element.
- Pass a prop to the component (in my case: an object with various fields that can be null)
- Use the item prop with the VInlineSelect element.
- Add a watcher to item prop or to a certain field of that item
- Reload your page and check your console
<template>
<VInlineSelect
:model-value="props.item"
@update:modelValue="(val) => (props.item.input_group = val)"
item-title="input_group"
item-value="input_group"
:items="['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']"
name="state"
cell
:empty-text="undefined"
return-object
></VInlineSelect>
</template>
<script setup>
const props = defineProps({
item: Object,
});
watch(
() => props.item.input_group,
(val) => {
console.log(val);
}
);
</script>
Relevant log output
No response
Reproduction link
/
Additional context
No response
Code of Conduct
- I agree to follow this project's Code of Conduct