Skip to content

[Bug]: VInlineSelect is changing reactive value from null to empty string on mount #40

Closed
@DaanVervacke

Description

@DaanVervacke

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

  1. Create a component with a VInlineSelect element.
  2. Pass a prop to the component (in my case: an object with various fields that can be null)
  3. Use the item prop with the VInlineSelect element.
  4. Add a watcher to item prop or to a certain field of that item
  5. 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

Metadata

Metadata

Labels

bugSomething isn't working

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions