Filtering items, checkbox issue laravel + vue js - vue.js

Question

I have a "Messages" table in the database. I am trying to make a filter by read/unread
For the filter, I am trying to make two checkboxes, and a "isread" variable, however I cant manage to make it work, heres what I have:
<input
type="checkbox"
id="1"
class="read"
v-model="isread"
:value="1"
/>
<input
type="checkbox"
id="0"
class="unread"
v-model="isread"
:value="0"
/>
The issue is that I get tons of errors in the console, plus the checkboxes get ticked/unticked at the same time (like its the same checkbox). My expected result, is that the variable "isread" stores value "0" if the "0" checkbox is checked, and "1" if the "1" is checked. Or, if both - both values get stored. Could you help me?

Answer 1

If I understand your requirement correctly, You are trying to filtered out the existing list of messages based on the read and unread messages. If Yes, You can try this solution :
var vm = new Vue({
el:"#app",
data:{
messages: [
'read1',
'read2',
'read3',
'read4',
'unread5',
'unread6',
'unread7',
'unread8',
'read9',
'read10',
],
isread: null,
isunread: null,
filteredMessages: []
},
mounted() {
this.filteredMessages = this.messages;
},
methods: {
check(e) {
if (e.target.checked && (e.target.value === '1')) {
this.filteredMessages = this.messages.filter((item) => item.indexOf('unread') === -1)
this.isunread = 0;
} else if (e.target.checked && (e.target.value === '0')) {
this.filteredMessages = this.messages.filter((item) => item.indexOf('unread') !== -1)
this.isread = 0;
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
Read :<input
type="checkbox"
id="1"
class="read"
v-model="isread"
:value="1"
#change="check($event)"
/>
Unread :<input
type="checkbox"
id="0"
class="unread"
v-model="isunread"
:value="0"
#change="check($event)"
/>
<ul class="list">
<li v-for="(message, index) in filteredMessages" :key="index">{{ message }}</li>
</ul>
</div>