How to select all check boxes based on condition with Value.js

How to select all check boxes based on condition with Value.js
Can you guys please have a look at this.

Select all checkboxes (select all checkboxes)

<div id="app">
      <label>
        <input type="checkbox" v-model="selectAll" /> Select all</label>
      <ul>
        <input type="checkbox" v-model="desktop"/>
        <input type="checkbox" v-model="document"/>
        <input type="checkbox" v-model="afile"/>
        <input type="checkbox" v-model="bookmark"/>
      </ul>
    </div>

    data() {
        return {
            desktop: false,
            document: false,
            afile: false,
            bookmark: false,
            selectAll: false,
            selected: [],
        }
    },
    computed: {
         generalPolicyList() {
                    return this.$store.state.management.policy.policyDataList.generalPolicydata
                },
    },
    created() {
         if (this.generalPolicyList.pd_wallpaperchk == "Y") this.desktop = true;
         if (this.generalPolicyList.pd_documentchk == "Y") this.document = true;
         if (this.generalPolicyList.pd_acntnfilechk == "Y") this.afile = true;
         if (this.generalPolicyList.pd_bookmarkchk == "Y") this.bookmark = true;
    },
    methods: {
         select_all() {
                   ???????????????
                },
    }

Hi

You have to set all values to true

selectAll() {
  this.desktop = true;
  this.document = true;
  this.afile = true;
  ... and so on
}
1 Like

selectAll() {
this.desktop = true;
this.document = true;
this.afile = true;
this.bookmark = true
}

1 Like

Thank you for your reply.
I have one more question.
I solved it when it was a full choice.

select_all() {
                this.selected = [];
                if (!this.selectAll) {
                    this.desktop = true;
                    this.document = true;
                    ...
                    for (let fm of this.setPolicyData.policydata) {
                        if (fm.div == 'G' && fm.id == 2){
                            fm.wallpaperchk = 'Y';
                            fm.documentchk = 'Y';
                            ........
                        }
                    }
                } else {
                    this.desktop = false;
                    this.document = false;
                    ......
                    for (let fm of this.setPolicyData.policydata) {
                        if (fm.div == 'G' && fm.id == 2){
                            fm.wallpaperchk = 'N';
                            fm.documentchk = 'N';
                            ..........
                        }
                    }
                }
            },

By the way, I did watch when I chose each one. Is it okay?
Is there a better way?

watch: {
            desktop() {
                if (!this.desktop == true) {
                    for (let fm of this.setPolicyData.policydata) {
                        if (fm.div == 'G' && fm.id == 2){
                            fm.wallpaperchk = 'N';
                        }
                    }
                }else{
                    for (let fm of this.setPolicyData.policydata) {
                        if (fm.div == 'G' && fm.id == 2){
                            fm.wallpaperchk = 'Y';
                        }
                    }
                }
            },
            document(){
                      ...........
            },
            afile(){
                  ............
            },
            ............
        },