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