Как работает Vue v-model с update:modelValue и как предотвратить использование логики по умолчанию в зависимости от модального режима

Может кто-нибудь объяснить мне, если v-модель: :модельзначение обновление:модельвалуе тогда что произойдет, если v-model с update:modelValue использовала оба. Итак, в моем коде есть этот компонент:

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

Под капотом этот компонент использует 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>

Мне нужно запретить логику по умолчанию при изменении заголовка в update:modelValue, но только если в модели перенаправления [другой компонент, у которого есть только реквизиты для отображения и методы для перенаправления в другую организацию по URL-адресу или скрытия без перенаправления] пользователь нажимает кнопку принятия.

Таким образом, использование v-модели приводит к изменению заголовка независимо от того, какая кнопка нажата. Как я могу решить эту проблему? Я не думаю, что изменение v-model на :modelValue решит эту проблему, поскольку внутри логики ChangeOrRedirectModal нет изменения значения.

Каким образом этот компонент использует v-select? вы также много говорите о кнопках и операторе, но только если в модели перенаправления пользователь нажимает кнопку «Принять», это очень сбивает с толку.

Jaromanda X 03.07.2024 11:02

Спасибо за комментарий, сейчас добавим этот код

Dorialean 03.07.2024 11:34

«другой компонент, который имеет только реквизиты для отображения и методы для перенаправления в другую организацию по URL-адресу или скрытия без перенаправления] пользователь нажимает кнопку принятия» - это не отображается. Неясно, при каких условиях это должно произойти и в каком компоненте эти реквизиты доступны. «внутри логики ChangeOrRedirectModal значение не меняется» - оно также не отображается

Estus Flask 03.07.2024 12:44
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
90
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

v-модель содержит текущее значение (по умолчанию или обновленное без контроля). @update:modelValue это похоже на событие, которое срабатывает после обновления v-модели. Я не уверен, что именно вы делаете с другими компонентами и перенаправлениями при щелчке (мне кажется, что вам нужно что-то проверить, прежде чем обновлять значение v-модели). Пытались ли вы использовать вычисленное значение (:value="computedValue") вместо v-модели и изменение события для управления новым значением?

Нет, я не пробовал вычислять, но это отличная идея! Спасибо, я попробую и думаю, что получится

Dorialean 03.07.2024 13:05

Другие вопросы по теме