Как исключить элемент из цикла v-for?

Как я могу исключить элемент из цикла с типом, равным «скрытому» в Vue?

<span v-for = "(customField, index) in item.customFields" :key = "index">
{{ customField.value }}
</span>

vue.js

03.05.2023 08:18

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Вы должны создать вычисляемое значение, которое фильтрует элементы для рендеринга.

В твоем случае:

API композиции:

const customFieldsToRender = computed(() => item.value?.customFields?.filter((f) => f.type !== "hidden")) || [];

API опций:

customFieldsToRender() {
  return this.item?.customFields?.filter((f) => f.type !== "hidden")) || [];
}

И затем отображать поля по этому вычисляемому значению

<span v-for = "(customField, index) in customFieldsToRender" :key = "index">
{{ customField.value }}
</span>

Кроме того, я вижу, что вы используете индекс в качестве ключа в цикле v-for. Это плохая практика. Здесь хорошо объяснено, почему это так - Почему бы не всегда использовать индекс в качестве ключа в цикле for vue.js?

03.05.2023 08:29

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

Закройте модальное окно, отправив клавишу esc в браузере с помощью javascript

Использование vue-select или другого удобного поля выбора с ESM vuild из Vue 3

Параметры маршрута не определены в макетах/компонентах в Nuxt 3

Как в Vue3 получить доступ к свойствам, подобным свойствам «beforeRouteEnter» в Composition API?

Как использовать встроенные правила проверки в VeeValidate 4?

Загрузите файл приложения/pdf, отправленный из бэкэнда

Как мне манипулировать изображением, а затем сохранить результаты?

Использование Vue Router в DataTables

Vue 3 Dom не обновляется во время вызова функции

Как я могу получить доступ к свойствам с помощью API композиции Vue 3?

Как исключить элемент из цикла v-for?

Ответы 1

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

Похожие вопросы