Флажок Vue получает значение массива, но хочет массив объектов JSON

enter image description here

<checkbox-group @change="checkboxChange">
                <label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
                    <view>
                        <checkbox :value="item.value" :checked="item.checked" />
                    </view>
                    <view>{{item.name}}</view>
                </label>
            </checkbox-group>

Переменная данных из флажка

items: [
        {
           value: 'USA',
           name: 'American'
        },

         {
           value: 'JPN',
           name: 'Japan'
         },
         {
           value: 'ENG',
           name: 'England'
         },
         {
           value: 'FRA',
           name: 'France'
         }
 ]

Когда установите флажок для выбора разных стран, получите это значение. ["Япония", "ENG"]

checkboxChange: function(e) {
                var items = this.items,
                      values = e.detail.value; 
            
                console.log(values) #get value ["JPN", "ENG"]
}

Но желаемый результат - это массив объектов JSON, как показано ниже.

new_items: [ 
       {
         value: 'JPN',
         name: 'Japan'
       },
       {
         value: 'ENG',
         name: 'English'
       }
]

Как я могу использовать это значение ["JPN", "ENG"] для сопоставления с элементами флажка для получения new_items?

Пожалуйста, покажите элемент checkbox и как он связан?

Boussadjra Brahim 10.04.2022 09:11

Я написал @BoussadjraBrahim

T_Ner 10.04.2022 09:21

какую структуру пользовательского интерфейса вы используете?

Boussadjra Brahim 10.04.2022 09:27

Разве это не глобальная структура пользовательского интерфейса только для SuperApp и miniApp. И я думаю, что значение результата может преобразовать массив в массив объектов JSON, верно? @BoussadjraBrahim

T_Ner 10.04.2022 09:34

попробуй <checkbox :value="item" :checked="item.checked" />

Boussadjra Brahim 10.04.2022 09:37

это сработало, это так просто? ха-ха, я плохо смотрел код. @BoussadjraBrahim

T_Ner 10.04.2022 09:43
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
0
6
21
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Попробуйте привязать весь объект к реквизиту value:

<checkbox :value="item" :checked="item.checked" /> 

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