Can someone explain to me if v-model is: :modelValue update:modelValue then what happen when v-model with update:modelValue used both. So in my code I have this component:
<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>
Under the hood this component uses 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 need to prevent default logic on changing title on update:modelValue but only if on redirect model [another component that only has props to show and methods to either redirect to another organisation by url or do hide itself without redirecting] user presses accept button.
So using v-model leads to changing title no matter what button pressed. How can I solve this issue? I don't think that changing v-model to :modelValue will fix this issue because there is no changing of value inside changeOrRedirectModal logic.
v-model contains the current value (defautl or updated without control). @update:modelValue it's like an event that trigger after v-model is updated. I am not sure about what are you doing exaclty with others component and redirections on click (it seem to me that you need to check something before update the v-model value). Did you try to use a computed value (:value="computedValue") instead v-model and an event change to manage the new value?