vuematerial / vue-material

Vue.js Framework - ready-to-use Vue components with Material Design, free forever.
https://www.creative-tim.com/vuematerial
MIT License
9.89k stars 1.15k forks source link

[MdCheckbox]: Set default checked #1919

Open zapping opened 6 years ago

zapping commented 6 years ago

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 commented 6 years ago

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

zapping commented 6 years ago

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 commented 6 years ago

Maybe that works only in dev branch.

Samuell1 commented 6 years ago

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

zapping commented 6 years ago

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 commented 6 years ago
<script>
  export default {
    name: 'RegularCheckboxes',
    data: () => ({
      array: [1, 3, 5]
    })
  }
</script>

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

zapping commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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