Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

230
Views
Vue Checkbox get an array value but want Array of JSON Objects

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>

The data variable from the checkbox is

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

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

When check the box for selecting different countries, will get this value. ["JPN", "ENG"]

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

But the desired result is Array of JSON Objects like below

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

How can I use this value ["JPN", "ENG"] to map with checkbox items to get new_items?

about 4 years ago · Santiago Gelvez
1 answers
Answer question

0

Try to bind the whole object to the value prop :

<checkbox :value="item" :checked="item.checked" /> 
about 4 years ago · Santiago Gelvez Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!