Vue-material: [MdCheckbox]: Set default checked

[zapping]

Is it possible to set a dynamic checkboxes as checked that has an array as v-model. Something like similar template.

<md-checkbox v-for="i in 5" :key="i" v-model="array" :value="i" checked>Array</md-checkbox>

Tried giving the checked attribute but that did not help.

https://codesandbox.io/s/181v9jk3l3

[Samuell1]

Try
<md-checkbox v-for="i in 5" :key="i" :model="array" :value="true" checked>Array</md-checkbox>

[zapping]

Tied it with :value="i" but does not help. If :value="true" is set then when a checkbox is clicked all the checkboxes gets selected at once. Also tried setting :true-value="i" but that too does not init the checkboxes.

<md-checkbox v-for="i in 5" :key="i" v-model="array" :value="i" :true-value="i" checked>Option {{i}}</md-checkbox>

[Samuell1]

Maybe that works only in dev branch.

[Samuell1]

@zapping Do you tried :model not a v-model?

[zapping]

I tried just now adding :model to the codepen, like below, but unfortunately did workout.

<md-checkbox v-for="i in 5" :key="i" :model="array" :value="i" :true-value="i" checked>Option {i}}</md-checkbox>

[VdustR]

<script>
  export default {
    name: 'RegularCheckboxes',
    data: () => ({
      array: [1, 3, 5]
    })
  }
</script>

v-model is the array with values which are checked.

[zapping]

The checkboxes would appear checked if the array is actually initialized but the array length is unknown during mount. Only when the data is pulled from the server its known. For now a function has been written to initialize the array after the data is pulled. But the check appears after 1-2 sec delay after all the other components are loaded.

If its feasible then can the checked attribute be considered in the MdCheckbox component and set when the component is mounted then it will be useful. Specifically in cases where :value is not an integer sequence, like in my use case here. It could be something dependent on a property of the parent array of objects like :value="objItem.IsTaxed".

[VdustR]

If you want control the model with boolean, you have to write like this:

<template>
  <div>
    <md-checkbox v-for="(item, i) in array" :key="item.title" :model="item.isTaxed" @change="toggle(i)">{{item.title}}</md-checkbox>
    <div>array: {{array}}</div>
    <div>selected: {{selected}}</div>
  </div>
</template>

<script>
  export default {
    name: 'RegularCheckboxes',
    data: () => ({
       array: [{
         title: 'Option 1',
         isTaxed: true,
       }, {
         title: 'Option 2',
         isTaxed: false,
       }, {
         title: 'Option 3',
         isTaxed: false,
       }, {
         title: 'Option 4',
         isTaxed: true,
       }, {
         title: 'Option 5',
         isTaxed: true,
      }]
    }),
    computed: {
      selected() {
        return this.array.filter(item => item.isTaxed).map(item => item.title)
      }
    },
    methods: {
      toggle (index) {
        this.array = this.array.map((item, i) => {
          return i === index ? {
            ...item,
             isTaxed: !item.isTaxed
          } : item;
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .md-checkbox {
    display: flex;
  }
</style>

About async fetching, that's another problem. I think you could consider to design the life cycle about loading, error and success statement for your component.

[zapping]

I could find another option with hooks.

In the template:

<md-checkbox v-for="i in 5" :key="i" v-model="array" :value="i" :true-value="i" @hook:mounted="setChecked(i)" checked>Option {{i}}</md-checkbox>

In the script:

    methods:{
      setChecked(ind){
        this.array.push(ind);
      }
    }

This worked out just fine without issues.

@VdustR, I could see the boolean one you mentioned in the comment above. I guess instead of using the boolean property directly, either the object from the array or the Id property needs to be used like in :value="objItem" or :value="objItem.id"

Could you help me with one more query please, is there a way to check for the presence of the checked attribute in the setChecked function. Just in case if checked happens to be conditionally set then this would be handy.

[zapping]

np thx. The condition used to set the checked attribute can be passed along with the initChecked function as a second parameter.