Vue 2 : how to select just the search results inside v-data-table

I tried to use select all (as a checkbox) to select all result that what I search for, but it’s still selected all data in table and I use employee.map for loop my selection all data in table. Can somebody help me?

here is my code :

<template>
  <div>
    <v-container>
      <v-row>
        <v-col cols="12" md="6" sm="8">
          <v-text-field
            v-model="search"
            append-icon="mdi-magnify"
            label="Search"
            single-line
            hide-details
          ></v-text-field>
        </v-col>
      </v-row>
    </v-container>
    <v-row>
      <v-col cols="12" sm="12" md="12">
        <v-data-table
          :headers="headers"
          :items="employee"
          :single-select="singleSelect"
          item-key="empname"
          :search="search"
          :sort-by="['check', 'id']"
          :sort-desc="true"
          class="elevation-1"
        >
          <template v-slot:item.check="{ item }">
            <v-simple-checkbox v-model="item.check"></v-simple-checkbox>
          </template>
        </v-data-table>
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="12" sm="12" md="12">
        <v-checkbox
          label="Select All"
          style="direction: rtl"
          @click="allSelected()"
        ></v-checkbox>
      </v-col>
    </v-row>
  </div>
</template>

<script>
export default {
  data: () => ({
    singleSelect: false,
    selected: [],
    search: '',
    headers: [
      {
        text: 'ID',
        align: 'start',
        value: 'id',
      },
      { text: 'Employee Name', value: 'empname', sortable: false },
      { text: 'Job', value: 'job', sortable: false },
      { text: 'Check', value: 'check', sortable: false, align: 'center' },
    ],
    employee: [],
  }),

  watch: {
    dialog(val) {
      val || this.close()
    },
    dialogDelete(val) {
      val || this.closeDelete()
    },
  },
  created() {
    this.initialize()
  },

  methods: {
    allSelected() {
      this.employee.map((emp) => {
        emp.check = !emp.check
        console.log(emp.check)
      })
    },
    initialize() {
      this.employee = [
        {
          id: '1',
          empname: 'Joel',
          job:'Doctor',
          check: false,
        },
        {
          id: '2',
          empname: 'Lisa',
          job:'Nurse',
          check: false,
        },
        {
          id: '3',
          empname: 'Vera',
          job:'Doctor',
          check: false,
        },
        {
          id: '4',
          empname: 'Leo',
          job:'Nurse',
          check: false,
        },
      ]
    },
  },
}
</script>

if there is anything that I did wrong more than what I expected. I apologize. and Thanks for Helping me.

Answer

I’m not sure about what you want to do, if you want that checkbox to be use to select the employees, or if that checkbox represent a data about the employee (e.g: isVaccinated)

If you want to select the employees: You can use the API of v-data-table: Add a v-model and a show-select to v-data-table:

        <v-data-table
          :headers="headers"
          v-model="selected"
          :items="employee"
          :single-select="singleSelect"
          show-select
          item-key="empname"
          :search="search"
          :sort-by="['check', 'id']"
          :sort-desc="true"
          class="elevation-1"
        >

Then you can delete the field “check” of the employees, the custom checkbox, the methods related to check and uncheck because you don’t need it, everything is handle by v-data-table:

<template>
  <div>
    <v-container>
      <v-row>
        <v-col cols="12" md="6" sm="8">
          <v-text-field
            v-model="search"
            append-icon="mdi-magnify"
            label="Search"
            single-line
            hide-details
          ></v-text-field>
        </v-col>
      </v-row>
    </v-container>
    <v-row>
      <v-col cols="12" sm="12" md="12">
        <v-data-table
          :headers="headers"
          v-model="selected"
          :items="employee"
          :single-select="singleSelect"
          show-select
          item-key="empname"
          :search="search"
          :sort-by="['check', 'id']"
          :sort-desc="true"
          class="elevation-1"
        >
        </v-data-table>
      </v-col>
    </v-row>
  </div>
</template>

<script>
export default {
  data: () => ({
    singleSelect: false,
    selected: [],
    search: "",
    headers: [
      {
        text: "ID",
        align: "start",
        value: "id",
      },
      { text: "Employee Name", value: "empname", sortable: false },
      { text: "Job", value: "job", sortable: false },
    ],
    employee: [],
  }),

  watch: {
    dialog(val) {
      val || this.close();
    },
    dialogDelete(val) {
      val || this.closeDelete();
    },
  },
  created() {
    this.initialize();
  },

  methods: {
    initialize() {
      this.employee = [
        {
          id: "1",
          empname: "Joel",
          job: "Doctor",
        },
        {
          id: "2",
          empname: "Lisa",
          job: "Nurse",
        },
        {
          id: "3",
          empname: "Vera",
          job: "Doctor",
        },
        {
          id: "4",
          empname: "Leo",
          job: "Nurse",
        },
      ];
    },
  },
};
</script>

Tell me if it was the solution you expected

Advertisement

Answer