CODEWITHSUNDEEP
javascriptvue.js
Molly Christian
Molly Christian

Reputation: 167

Showing checked checkboxes 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.

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

Upvotes: 0

Views: 755

Answers (1)

sandeep balaji
sandeep balaji

Reputation: 36

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?

Upvotes: 1

Related Questions