[Vuejs]-Filtering items, checkbox issue laravel + vue js

by

0👍

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>

Leave a comment