Vue.js: Set checkboxes checked if statement is true

Question

I had the following checkbox in my old handlebar view:

<div class="form-group">
    <input type='checkbox' name='xmlOnline[]' value="stepstone" class='' {{#if (ifIn 'stepstone' job.xmlOnline)}} checked="checked" {{/if}}> Stepstone
    <input type='checkbox' name='xmlOnline[]' value="karriere" class='' {{#if (ifIn 'karriere' job.xmlOnline)}} checked="checked" {{/if}}> Karriere
</div>

So if job.xmlOnline has "stepstone" as value, it should mark it as checked. Same goes for "karriere".

Now I am trying to achieve the same thing in Vue.js for my POST form. This is how the object "job" looks like: http://t2w-api.herokuapp.com/jobs/590c20d42b1c4300046bb1b9

So it can contain either "karriere", "stepstone", both or "null".

What I got so far in my component:

<div v-for="(xml, index) in job.xmlOnline">
    <input type="checkbox" :checked="xml == 'stepstone'"> Stepstone {{ index }}
    <input type="checkbox" :checked="xml == 'karriere'"> Karriere {{ index }}
</div>

Checkboxes get checked, but I have them duplicated. I also do not know how to add a v-model.

This is the source of my component. Did something similiar with "qualifications"/"responsibility": https://github.com/markusdanek/t2w-vue/blob/mdanek/2-auth-system/src/components/backend/JobEdit.vue

Bert · Accepted Answer · 2017-05-15 16:20:41Z

15

A possible solution

<input type="checkbox" 
       :checked="job.xmlOnline && job.xmlOnline.includes('stepstone')"
       @change="onChange('stepstone', $event)"> Stepstone
<input type="checkbox" 
       :checked="job.xmlOnline && job.xmlOnline.includes('karriere')"
       @change="onChange('karriere', $event)"> Karriere

And the onChange method

methods:{
  onChange(value, $event){
    if (!this.job.xmlOnline)
      this.job.xmlOnline = []

    const index = this.job.xmlOnline.findIndex(v => v == value) 
    const checked = $event.target.checked

    if (checked && index < 0)
      this.job.xmlOnline.push(value)
    if (!checked && index >= 0)
      this.job.xmlOnline.splice(index, 1)
  }
}

Example.

edited May 15, 2017 at 16:20

answered May 15, 2017 at 15:20

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

mrks Over a year ago

Thanks! Working perfectly :) Can you help me how I would post this checkbox when I add a new job? jsfiddle.net/ush3mps5

mrks Over a year ago

I also forgot, that it is also possible, that job.xmlOnline can also contain nothing. :/

Bert Over a year ago

@mrks When you say nothing do you mean it's null, or that it's an empty array. If it's an empty array, it will still work as in the answer. As far as how would you post it, that depends on your server side.

mrks Over a year ago

Sorry to be not clear enough. I meant that it can be also "null" like in this example: 57c52e875028100300236b6b

mrks Over a year ago

Perfect! Thank you very much! :-) Any last recommendations on my first comment (how to use v-model) when posting a new "job"?

|

Muhammad asif · Accepted Answer · 2020-01-13 13:09:48Z

3

<input type="checkbox" class="form-check-input" :value="party.status" 
@change="updateStatus"
 :checked="party.status == 1 ? true: false"
 id="status" name="status"/>

and in component method

updateStatus(e){
            if(e.target.checked){
                store.commit('updateStatus', 1);
            } else {
                store.commit('updateStatus', 0);
            }
    },

answered Jan 13, 2020 at 13:09

Muhammad asif

411 silver badge2 bronze badges

Comments

Mahesh Yadav · Accepted Answer · 2018-11-22 06:03:17Z

2

You can just bind it to a literal as

:true-value="1"

and it will work as expected.

answered Nov 22, 2018 at 6:03

Mahesh Yadav

2,69424 silver badges25 bronze badges

Comments

Dharman · Accepted Answer · 2019-08-19 19:15:01Z

1

<b-form-checkbox class="col-sm-1 small" :value="1" switch v-model="user.nameb" :state="Boolean(user.nameb)" name="checkbox-validation">
    <b-form-invalid-feedback v-show="!Boolean(user.nameb)" :state="Boolean(user.nameb)">Not Verified</b-form-invalid-feedback>
    <b-form-valid-feedback v-show="Boolean(user.nameb)" :state="Boolean(user.nameb)">Verified</b-form-valid-feedback>
</b-form-checkbox>

edited Aug 19, 2019 at 19:15

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Aug 19, 2019 at 19:12

chanaka

111 bronze badge

Collectives™ on Stack Overflow

Vue.js: Set checkboxes checked if statement is true

4 Answers 4

8 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related