Could someone provide an explanation of the usage of v-model with :modelValue and update:modelValue? What happens when both are used together? In the code snippet below, a component is shown:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.8/vue.global.min.js"></script>
<select-component
v-model="selectedOrganization"
:tooltip="selectedOrganization?.name"
:getOptionLabel="organization => organization.name"
:options="organizations"
:searchable="true"
:clearable="false"
@update:modelValue="changeOrRedirectModal"
@search="organizationSearchHandlerAsync">
</select-component>It is important to note that this component utilizes v-select.
<v-select
ref="select"
:title="tooltip"
class="select-component"
:class="{ 'error-select': hasErrorsInternal }"
:disabled="disabled"
:style="width ? `width: ${width}` : null"
v-bind="$attrs"
:modelValue="modelValue"
:options="options"
:taggable="taggable"
:multiple="multiple"
:placeholder="placeholder"
@search:focus="opened"
@update:modelValue="onItemSelected"
@search="(query, loadDelegate) => $emit('search', query, loadDelegate)">
<div v-for="(s, name) in $slots" :key="name" :slot="name">
<renderer :vnode="s" />
</div>
<div
v-for="(f, name) in $slots"
:key="name"
:slot="name"
slot-scope="props"
:title="showItemsTooltips ? props.fullName : null">
<renderer :vnode="f(props)" />
</div>
</v-select>
I am looking for a solution to prevent the default logic from changing the title when update:modelValue is triggered, but only when the user presses the accept button on a redirect model (another component with props to show and methods to redirect to another organization by URL or hide itself without redirection).
Using v-model results in changing the title regardless of the button pressed. How can this issue be resolved? Changing v-model to :modelValue might not solve the issue as there is no value change within the changeOrRedirectModal logic.