Search code examples
javascriptvue.jsvuejs3v-select

How does work Vue v-model with update:modelValue and how to prevent it from default logic depending on modal


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.


Solution

  • 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?