Use v-item-group to reduce logic in template

Author: naglepuff

web/src/components/DandisetsPage.vue

@@ -56,18 +56,26 @@
             <span>Sorting Options</span>
           </v-tooltip>
           <v-menu activator="parent">
-            <v-list>
-              <v-list-item
-                v-for="(option, i) in sortingOptions"
-                :key="option.name"
-                :value="option"
-                :append-icon="option.name === sortingOptions[sortOption].name ? 'mdi-check' : ''"
-                :active="option.name === sortingOptions[sortOption].name"
-                @click="changeSort(i)"
-              >
-                <v-list-item-title >{{ option.name }}</v-list-item-title>
-              </v-list-item>
-            </v-list>
+            <v-item-group v-model="sortOption">
+                <v-list>
+                  <v-item
+                    v-for="(option, i) in sortingOptions"
+                    :key="option.name"
+                    :value="i"
+                    v-slot="{ isSelected, toggle }"
+                  >
+                    <v-list-item
+                      @click="toggle"
+                      :active="isSelected"
+                    >
+                      <template #append>
+                        <v-icon v-if="isSelected">mdi-check</v-icon>
+                      </template>
+                      <v-list-item-title >{{ option.name }}</v-list-item-title>
+                    </v-list-item>
+                  </v-item>
+                </v-list>
+            </v-item-group>
           </v-menu>
         </v-btn>
         <v-btn
@@ -225,11 +233,6 @@ watch(queryParams, (params) => {
   });
 });
 
-function changeSort(index: number) {
-  sortOption.value = index;
-  page.value = 1;
-}
-
 function changeSortDir() {
   sortDir.value = -1 * sortDir.value;
 }