Блог

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

Конечная цель — иметь возможность использовать 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 и ничего не менять в разделе «Local»?

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

Сначала вопрос SO — поэтому упреждающие извинения, если проблемы с тем, как я спросил. Я использую Vue3. Все советы приветствуются.

Цикл проверки элементов для правильного раздела. Для раздела, если есть 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');