lundi 30 octobre 2017

Vue how to set checked checbox if value is in array?

I have a little problem, because I have a component, where I have statuses to filtr and in value when someone check checbox I have id of this status. Like this: html:

 <div v-for="(status, key) in statuses">
                        <label v-bind:for="'status_id_'+key" class="form-check-label" v-on:click.stop>
                        <input type="checkbox"
                               v-bind:id="'status_id_'+key"
                               v-bind:value="key"
                               v-model="checkedStatusesIds"
                               v-on:click="updateStatus(key, $event.target.checked)"
                               class="form-check-input"/>
                            
                        </label>
                    </div>

And here is my Vue:

name: 'searchbox',
    data: () => ({
        query: undefined,
        checkedStatusesIds: [],
        statusesAll: false,
        searchError: '',
    }),
    props: [
        'placeholder',
        'statuses'
    ],

    methods: {
        getSearchResult: function () {
            if (typeof(this.statuses) !== 'undefined' &&
                this.checkedStatusesIds.length !== Object.keys(this.statuses).length) {
                this.statusesAll = false;
            }
            this.$emit('search', 1, this.query, this.checkedStatusesIds);
        },
        getQuerySearchResult: function () {
            this.searchError = '';
            if (typeof(this.query) === 'undefined' || this.query === '') {
                this.searchError = 'Too short query';
                return;
            }
            this.getSearchResult();
        },
        updateStatus: function (key, isChecked) {
            if (isChecked) {
                this.checkedStatusesIds.push(key)
            } else {
                let index = this.checkedStatusesIds.indexOf(key);
                if (index > -1) {
                    this.checkedStatusesIds.splice(index, 1);
                }
            }
            this.searchError = '';
            this.getSearchResult();
        },
        toggleStatuses: function (event) {
            let isChecked = event.target.checked;
            let self = this;
            this.checkedStatusesIds = [];
            if (isChecked) {
                Object.keys(this.statuses).forEach((value) => {
                    self.checkedStatusesIds.push(value);
                })
            }
            this.getSearchResult();
        },
    }

I have problem, because in data in checkedStatusesIds i have a structure for example like this:

0=>1
1=>2
3=>5

And I tryed to compare in my loop with statuses, or is in checkedStatusesIds, a specific key ( checkedStatusesIds.value = statuses.key ) them please let this checbox be checked. Be this doesn't work. How can I do this? I have every possible data to do this but I cannot programm this. Someone can help me?




Aucun commentaire:

Enregistrer un commentaire