UnivateProperties/src/components/shared/listViewControl.vue

<template>
  <div class="container">
    <div class="offset-3 col-md-6">
      <input v-model="searchItem" class="form-control" placeholder="Search...." />
    </div>
    <hr />
    <div class="row">
      <div v-for="item in items" :key="item" class="col-md-4">
        <div :class="{'inSearch': isInSelected(item)}">
          <CheckItem :title="item.column" :show="item.show" @checkItem="checkItem" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import CheckItem from "./checkItem.vue";

export default {
  components: {
    CheckItem
  },
  data() {
    return {
      searchItem: undefined
    };
  },
  props: {
    items: undefined
  },
  methods: {
    isInSelected(i) {
      if (this.searchItem && this.searchItem.length > 0) {
        return (
          i.column.toLowerCase().indexOf(this.searchItem.toLowerCase()) > -1
        );
      }
      return false;
    },
    checkItem(column, show) {
      this.$emit("checkItem", column, show);
    }
  },
  computed: {}
};
</script>
<style>
.inSearch {
  border: 1px solid rgba(50, 50, 50, 0.5);
  border-radius: 10px;
  background-color: rgba(225, 225, 225, 0.6);
}
</style>