Vuetify column cannot be searched or sorted

Question

I have a Vuetify data table, and I have a feature that toggles whether editing is turned on or off.

For one of my columns (Roles), it will toggle between showing just text (editing disabled) or a selection dropdown (editing enabled). The toggle is set using a boolean, and I toggle the components' visibility using a v-if and v-else attribute.

Editing disabled

Editing enabled (user can then select the new value in each dropdown)

However, this seems to have a conflict with whether it can be sorted or searched. The other columns are unaffected and can be searched/sorted normally. Please help me to see if there are any errors, thank you.

Table

<v-data-table :headers="headers" :items="users" :items-per-page="10" :search="search">
     <template v-slot:item.role="{ item }">
       <v-select
         :items="roles"
         item-text="roleName"
         item-value="roleId"
         v-model="item"
         v-if="!editIsDisabled"
       ></v-select>
       <div v-else v-for="role in roles" :key="role.roleId">
         <span v-if="role.roleId === item.roleId">{{ role.roleName }}</span>
       </div>
     </template>
...
</v-data-table>

Script tag

export default {
  data() {
    return {
      editIsDisabled: true,
      search: "",
      roles: [
        {
          roleId: 1,
          roleName: "Procurement"
        },
        {
          roleId: 2,
          roleName: "Fulfilment"
        },
        {
          roleId: 3,
          roleName: "Human Resources"
        }
      ],
      headers: [
        {
          text: "User ID",
          value: "userId"
        },
        {
          text: "User",
          value: "userName"
        },
        {
          text: "Role",
          value: "role",
          sortable: false
        }
      ],
      users: [
        {
          userId: 122,
          userName: "John Lim",
          roleId: 1
        },
        {
          userId: 125,
          userName: "Amy Lee",
          roleId: 1
        },
        {
          userId: 102,
          userName: "Ben Tan",
          roleId: 2
        },
        {
          userId: 156,
          userName: "Cindy Ng",
          roleId: 2
        },
        {
          userId: 89,
          userName: "Chris Lee",
          roleId: 3
        }
      ]
    };
  }
};

Answer 1

The search items should be a part of users object, In you case, the roles are mapped based on roleId in users array and roles array

I've refactored the above code to include role as a property on created hook , so that roles will be a part of users array and it is eligible for search

Working codepen here: https://codepen.io/chansv/pen/zYYPrqL?editors=1010

<div id="app">
  <v-app id="inspire">
    <v-card>
      <v-card-title>
        Users
        <v-spacer></v-spacer>
        <v-text-field
          v-model="search"
          append-icon="search"
          label="Search"
          single-line
          hide-details
        ></v-text-field>
        <v-btn color="primary" @click="editIsDisabled = !editIsDisabled"> Edit</v-btn>
      </v-card-title>

    <v-data-table :headers="headers" :items="users" :items-per-page="10" :search="search">
     <template v-slot:item.role="{ item }">
       <v-select
         :items="roles"
         item-text="roleName"
         item-value="roleId"
         v-model="item"
         v-if="!editIsDisabled"
       ></v-select>
       <span v-else>{{item.role}}</span>
     </template>
</v-data-table>
      </v-card>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      editIsDisabled: true,
      search: "",
      roles: [
        {
          roleId: 1,
          roleName: "Procurement"
        },
        {
          roleId: 2,
          roleName: "Fulfilment"
        },
        {
          roleId: 3,
          roleName: "Human Resources"
        }
      ],
      headers: [
        {
          text: "User ID",
          value: "userId"
        },
        {
          text: "User",
          value: "userName"
        },
        {
          text: "Role",
          value: "role",
          sortable: false,
        }
      ],
      users: [
        {
          userId: 122,
          userName: "John Lim",
          roleId: 1
        },
        {
          userId: 125,
          userName: "Amy Lee",
          roleId: 1
        },
        {
          userId: 102,
          userName: "Ben Tan",
          roleId: 2
        },
        {
          userId: 156,
          userName: "Cindy Ng",
          roleId: 2
        },
        {
          userId: 89,
          userName: "Chris Lee",
          roleId: 3
        }
      ]
    }
  },
  created() {
    var rolesObj = {};
    this.roles.map(x => rolesObj[x.roleId] = x.roleName);
    this.users.forEach(x => {
      x.role = rolesObj[x.roleId];
    })
  },
})