Filtering items, checkbox issue laravel + 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?

your isread should be an array. refer here stackoverflow.com/a/67449979/6445166 — Min Somai
– Min Somai, Commented Mar 23, 2022 at 5:25
@lljaLaurs I added an answer. Hope that will work as per your expectation. — Rohìt Jíndal
– Rohìt Jíndal, Commented Mar 24, 2022 at 8:59

Rohìt Jíndal · Accepted Answer · 2022-03-23 05:39:32Z

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>

Collectives™ on Stack Overflow

Filtering items, checkbox issue laravel + vue js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related