Vue.js: Set checkboxes checked if statement is true

Related searches

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

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.

How to determine whether a checkbox is checked or not in Vue js , In jquery we have functions like $('input[type=checkbox]').prop('checked'); which will return true if checkbox is checked or not. What is the  Vue.js set checkbox checked Example. Set v-model to true to make checkbox as checked. Here is an example of checkbox checked state.-

You can just bind it to a literal as

:true-value="1" 

and it will work as expected.

How to select all check boxes based on condition with Value.js, How to select all check boxes based on condition with Value.js Can you guys please have a look at this. Select all checkboxes (select all  It’ll be checked by default because of the checked attribute. jQuery allows you to check a DOM element’s attribute through the .attr () method e.g.: $ ('input [type=checkbox]').attr ('checked');

<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>

Form Input Bindings, Mixins · Custom Directives · Render Functions & JSX · Plugins · Filters It automatically picks the correct way to update the element based on the input type​. If you want to cater to these updates as well, use the input event instead. <​input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox"​>{{  Some backends or APIs require true/false values from checkboxes to be provided in a certain way (e.g. "1" vs "0", or non-empty vs. empty string). It would be great if there were a way to specify the true and false values for a checkbox i

<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);
            }
    },

Checkbox doesn't have it's checked state set via v-model if the click , I would expect the checkbox to be checked if the v-model value is set to of how the checkbox arrived at that state - by something else setting it to true, are seeing with Vue 2.6 now is 100% in line with vanilla JS behaviour. A similar method to Andree's that I personally use would be to put the value in row one above each corresponding checkbox column. I then use the same formula but replace the first bit with references locked to row one. In the below example, the column names are bold and underlined. Each column is set to a checkbox.

Checkbox doesn't check with binding checked attribute · Issue , vuejs / vue up for GitHub”, you agree to our terms of service and privacy statement. My assumption is that this is because Vue's DOM update kicks in via a So basically, even if a user checked a checkbox - that doesn't mean I want true so the checkbox should still have that attribute set, and does not. true|false: Specifies whether a checkbox should be checked or not. true - The checkbox is checked; false - Default. The checkbox is not checked

Vue.js version. 1.0.26. What is Expected? The checkboxes binded with Vuejs can have THREE states: true, false, or indeterminate. For example, when binded with a checkbox and the value is "indeterminate", the checkbox's indeterminate property is set to true.

Only the value(s) of the checked checkboxes will be returned in the v-model bound array. You should provide a unique value for each checkbox's value prop (the default of true will not work when bound to an array) To pre-check any radios, set the v-model to the value(s) of the checks that you would like pre-selected.

Comments
  • Thanks! Working perfectly :) Can you help me how I would post this checkbox when I add a new job? jsfiddle.net/ush3mps5
  • I also forgot, that it is also possible, that job.xmlOnline can also contain nothing. :/
  • @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.
  • Sorry to be not clear enough. I meant that it can be also "null" like in this example: 57c52e875028100300236b6b
  • Perfect! Thank you very much! :-) Any last recommendations on my first comment (how to use v-model) when posting a new "job"?