Showing checked checkboxes with Vue.js

Question

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.

 <script>
    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',
    })
</script>

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.

sandeep balaji · Accepted Answer · 2020-02-20 06:09:09Z

1

new Vue({
  el: '#app',
  data: {
    sites: {
      "BN-C": "Brisbane Central",
      "ML-C": "Melbourne Central",
      "AMB-C": "Amberley Central",
      "PEA-C": "Pearce Central"
    },
    enabledSites: ["BN-C", "ML-C"]
  },
  methods: {
    check() {
      console.log(this.enabledSites);
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <div class="form-group">
      <div class="row form-group" v-for="(key,val) in sites" :key="key">
        <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()">
        </div>
      </div>
    </div>
</div>

If are using v-model, checked wont work in the checkbox. You have to handle that manually. Here the link that might help you In Vue, v-binding is not working on the "checked" property for Bootstrap Toggle Checkboxes?

edited Feb 20, 2020 at 6:09

answered Feb 20, 2020 at 4:46

sandeep balaji

365 bronze badges

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

5 Comments

Molly Christian Over a year ago

Would be great if anyone can share an example.

sandeep balaji Over a year ago

@MollyChristian check the edited post, I have added a snippet.

sandeep balaji Over a year ago

Please mark it as answered if your problem is solved @MollyChristian

Molly Christian Over a year ago

Hi sandeep, thanks for your answer, but I need to have enabledSites arrayupdated when I select checkboxes, however selectedSites is predefined array which is shown as checked.

sandeep balaji Over a year ago

Oh, so dont want the checked once in the selected list array?

Collectives™ on Stack Overflow

Showing checked checkboxes with Vue.js

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related