Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Patel's avatar
Level 1

Showing Checked on Checkbox with Vue JS

I am very new to vue, just need to change some code to make it work, and havent played much with vue. Can you please help.

I have a form with multiple checkboxes, just need to display checked checkboxes from array.

const sites = {"BN-C":"Brisbane Central","ML-C":"Melbourne Central","AMB-C":"Amberley Central","PEA-C":"Pearce Central"}; let enabledSites = []; let selectedSites = ["BN-C","ML-C"];
Vue.component('site_assignment', {
    data() {
        return {
            sites: sites,
            enabledSites : [],
            selectedSites: selectedSites,
        }
    },
    template: `
        <div class="form-group">
            <div class="row form-group" v-for="(key,val) in sites">
                <div class="col-sm-1"></div>
                 <div class="col-sm-1">
                    <label for="site_assignment" class="control-label">@{{ key }}</label>
                </div>
                <div class="col-sm-2">
                    <input type="checkbox" :id="val" :value="val" v-model="enabledSites" @change="check()" v-bind:checked="selected">
                </div>
            </div>
        </div>`,
    methods:{
        check(){
            enabledSites = this.enabledSites;
        },
    },
    computed: {
        selected(){
            return true;
        }
    }
});

new Vue({
    el: '#site_assignment',
})

I tried using v-bind but thats not working. My sites object is having all sites and the selectedSites have items which should get checked.

enabledSites gets updated when you check/uncheck items and this is then used by other script.

So BN-C and ML-C shoudl be checked.

0 likes
0 replies

Please or to participate in this conversation.