Как я могу изменить значение элемента в массиве на основе нескольких условий?

Я пытаюсь изменить значение элемента в массиве на основе сопоставления других элементов в массиве. Массив может содержать сведения о разделе (не уникальном), уникальный идентификатор и значение, которое я хочу изменить (в данном случае флаг «выбрано»). Цель состоит в том, чтобы иметь возможность иметь несколько элементов, которые могут иметь свой выбранный флаг. В любом отдельном разделе может быть «выбран» только один элемент, но в нескольких разделах может быть «выбран» отдельный элемент. Концептуально, я думаю, это можно представить так же, как наличие нескольких групп переключателей.

Конечная цель состоит в том, чтобы иметь возможность использовать state для запоминания выбора, сделанного в компоненте, созданном с использованием реквизита. Я очень хочу понять, а не просто копировать. Далее я займусь мутациями состояния, но лучше сначала решить эту проблему.

Итак, возьмите массив, например:

    menuItems: [
    {
      section: 'National',
      id: 'First item',
      selected: false
    },
    {
      section: 'National',
      id: 'Second item',
      selected: false
    },
    {
      section: 'National',
      id: 'Third item',
      selected: true
    },
    {
      section: 'Local',
      id: 'Fourth item',
      selected: false
    },
    {
      section: 'Local',
      id: 'Fifth item',
      selected: false
    },
    {
      section: 'Local',
      id: 'Sixth item',
      selected: true
    }
  ]

И некоторые строки поиска, такие как:

      searchSection: 'National',
      searchId: 'First item'

Как мне создать функцию, которая могла бы изменить выбранный флаг элемента с id: First item на true, остальные (второй, третий элемент) на false и ничего не менять в разделе «Локальные»?

Я пытался разобраться с использованием forEach петель, но безрезультатно, хотя это кажется правильным подходом. Использование findIndex для раздела, похоже, обречено на неудачу, поскольку нужно найти несколько элементов.

Первый ТАК вопрос - поэтому заранее извиняюсь, если проблемы с тем, как я спросил. Я использую Vue3. Все советы оценены.

Поведение ключевого слова "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) для оценки ваших знаний,...
3
0
226
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Прокрутите элементы, проверяющие нужный раздел. В разделе, если есть совпадение id, установите для selected значение true, в противном случае установите selected значение false:

methods: {
  flag(searchSection, searchId) {
    this.menuItems.forEach(item => {
       if (item.section === searchSection) {
          item.selected = item.id === searchId;
       }
    });
  }
}

Вызовите функцию:

this.flag('National', 'First item');

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