From 20a9ade14792e9aba86cb3ae9622bf5c222e7f04 Mon Sep 17 00:00:00 2001
From: LocalNewsTV <62873746+LocalNewsTV@users.noreply.github.com>
Date: Thu, 23 Nov 2023 08:38:20 -0800
Subject: [PATCH] Change 'slot/slot-scope' to 'v-slot:cell()'

---
 .../src/aquifers/components/Search.vue        |  6 +-
 app/frontend/src/aquifers/components/View.vue |  4 +-
 .../bulk/components/BulkAquiferDocuments.vue  |  8 +--
 .../components/BulkVerticalAquiferExtents.vue | 10 +--
 .../components/BulkWellAquiferCorrelation.vue |  8 +--
 .../src/bulk/components/BulkWellDocuments.vue |  4 +-
 .../components/SubmissionForm/AquiferData.vue |  4 +-
 .../SubmissionForm/PersonResponsible.vue      |  4 +-
 .../SubmissionForm/SubmissionHistory.vue      |  6 +-
 .../SubmissionForm/VerticalAquiferExtents.vue |  6 +-
 .../components/SubmissionForm/WellType.vue    |  4 +-
 .../SubmissionPreview/SubmissionPreview.vue   | 50 +++++++--------
 app/frontend/src/surveys/views/Surveys.vue    |  8 +--
 .../src/wells/views/EditWellAquifers.vue      |  4 +-
 app/frontend/src/wells/views/WellDetail.vue   | 64 +++++++++----------
 15 files changed, 95 insertions(+), 95 deletions(-)

diff --git a/app/frontend/src/aquifers/components/Search.vue b/app/frontend/src/aquifers/components/Search.vue
index 8c0b2234c9..4a33f9955c 100755
--- a/app/frontend/src/aquifers/components/Search.vue
+++ b/app/frontend/src/aquifers/components/Search.vue
@@ -140,13 +140,13 @@
             v-if="searchPerformed"
             :tbody-tr-class="searchResultsRowClass"
             responsive>
-            <template slot="id" slot-scope="row">
+            <template v-slot:cell(id)="row">
               <router-link :to="{ name: 'aquifers-view', params: {id: row.item.aquifer_id} }">{{ row.item.aquifer_id }}</router-link>
             </template>
-            <template slot="name" slot-scope="row">
+            <template v-slot:cell(name)="row">
               {{row.item.name}}
             </template>
-            <template slot="retire_date" slot-scope="row">
+            <template v-slot:cell(retire_date)="row">
               <span :title="row.item.retire_date">{{ row.item.retire_date | moment("MMMM Do YYYY [at] LT") }}</span>
             </template>
             <template v-slot:table-busy>
diff --git a/app/frontend/src/aquifers/components/View.vue b/app/frontend/src/aquifers/components/View.vue
index d0e5d85335..d1dffa8496 100644
--- a/app/frontend/src/aquifers/components/View.vue
+++ b/app/frontend/src/aquifers/components/View.vue
@@ -307,12 +307,12 @@
                 </b-row>
               </div>
               <b-table id="licenses" striped :items="licenceDetails.wells_by_licence">
-                <template slot="licence_number" slot-scope="row">
+                <template v-slot:cell(license_number)="row">
                   <a :href="`https://j200.gov.bc.ca/pub/ams/Default.aspx?PossePresentation=AMSPublic&amp;PosseObjectDef=o_ATIS_DocumentSearch&amp;PosseMenuName=WS_Main&Criteria_LicenceNumber=${row.item.licence_number}`" target="_blank">
                     {{ row.item.licence_number }}
                   </a>
                 </template>
-                <template slot="well_tag_numbers_in_licence" slot-scope="row">
+                <template v-slot:cell(well_tag_numbers_in_license)="row">
                   <ul class="p-0 m-0">
                     <li v-for="wtn in row.item.well_tag_numbers_in_licence" :key="wtn">
                       <router-link :to="{ name: 'wells-detail', params: { id: wtn }}">{{ wtn }}</router-link>
diff --git a/app/frontend/src/bulk/components/BulkAquiferDocuments.vue b/app/frontend/src/bulk/components/BulkAquiferDocuments.vue
index 3114f0c87d..cb8e6c8b3d 100644
--- a/app/frontend/src/bulk/components/BulkAquiferDocuments.vue
+++ b/app/frontend/src/bulk/components/BulkAquiferDocuments.vue
@@ -184,10 +184,10 @@
                           <template slot="no-options">
                             Search for an aquifer by name or id number
                           </template>
-                          <template slot="option" slot-scope="option">
+                          <template v-slot:cell(option)="option">
                             <div>{{ option.description }}</div>
                           </template>
-                          <template slot="selected-option" slot-scope="option">
+                          <template v-slot:cell(selected-option)="option">
                             <div>{{ option.description }}</div>
                           </template>
                         </v-select>
@@ -205,12 +205,12 @@
                       :show-empty="aquiferTableData.length === 0"
                       empty-text="No documents with keyed aquifer IDs"
                       striped>
-                      <template slot="aquiferId" slot-scope="row">
+                      <template v-slot:cell(aquiferId)="row">
                         <span :class="{ unknown: checkAquiferIsUnknown(row.item.aquiferId) }">
                           {{row.item.aquiferId}}
                         </span>
                       </template>
-                      <template slot="documents" slot-scope="row">
+                      <template v-slot:cell(documents)="option">
                         <ul>
                           <li v-for="(file, index) in row.item.documents" :key="index">
                             {{ fileNameWithoutPrefix(file.name) }}
diff --git a/app/frontend/src/bulk/components/BulkVerticalAquiferExtents.vue b/app/frontend/src/bulk/components/BulkVerticalAquiferExtents.vue
index ed75afd5f8..8aabfdbd11 100644
--- a/app/frontend/src/bulk/components/BulkVerticalAquiferExtents.vue
+++ b/app/frontend/src/bulk/components/BulkVerticalAquiferExtents.vue
@@ -124,12 +124,12 @@
               hover
               :items="errorsTableData"
               :fields="errorTableFields">
-              <template slot="wellTagNumber" slot-scope="row">
+              <template v-slot:cell(wellTagNumber)="row">
                 <span :class="{ error: isUnknownWell(row.item.wellTagNumber) }">
                   {{row.item.wellTagNumber}}
                 </span>
               </template>
-              <template slot="aquiferId" slot-scope="row">
+              <template v-slot:cell(aquiferId)="row">
                 <span :class="{ error: isUnknownAquifer(row.item.aquiferId) }">
                   {{row.item.aquiferId}}
                 </span>
@@ -153,15 +153,15 @@
               hover
               :items="tableData"
               :fields="tableFields">
-              <template slot="wellTagNumber" slot-scope="row">
+              <template v-slot:cell(wellTagNumber)="row">
                 <router-link :to="{ name: 'well-aquifers', params: {wellTagNumber: row.item.wellTagNumber} }" target="_blank">
                   {{row.item.wellTagNumber}}
                 </router-link>
               </template>
-              <template slot="fromDepth" slot-scope="row">
+              <template v-slot:cell(fromDepth)="row">
                 {{row.item.fromDepth.toFixed(2)}}
               </template>
-              <template slot="toDepth" slot-scope="row">
+              <template v-slot:cell(toDepth)="row">
                 {{row.item.toDepth === null ? '\u2014' : row.item.toDepth.toFixed(2)}}
               </template>
             </b-table>
diff --git a/app/frontend/src/bulk/components/BulkWellAquiferCorrelation.vue b/app/frontend/src/bulk/components/BulkWellAquiferCorrelation.vue
index b1293275f9..efb60ad290 100644
--- a/app/frontend/src/bulk/components/BulkWellAquiferCorrelation.vue
+++ b/app/frontend/src/bulk/components/BulkWellAquiferCorrelation.vue
@@ -94,12 +94,12 @@
               hover
               :items="errorsTableData"
               :fields="errorTableFields">
-              <template slot="aquiferId" slot-scope="row">
+              <template v-slot:cell(aquiferId)="row">
                 <span :class="{ error: isUnknownAquifer(row.item.aquiferId) }">
                   {{row.item.aquiferId}}
                 </span>
               </template>
-              <template slot="wellTagNumber" slot-scope="row">
+              <template v-slot:cell(wellTagNumber)="row">
                 <span :class="{ error: isUnknownWell(row.item.wellTagNumber) }">
                   {{row.item.wellTagNumber}}
                 </span>
@@ -133,12 +133,12 @@
               hover
               :items="tableData"
               :fields="tableFields">
-              <template slot="oldAquiferId" slot-scope="row">
+              <template v-slot:cell(oldAquiferId)="row">
                 <span>
                   {{formatOldAquifer(row)}}
                 </span>
               </template>
-              <template slot="warnings" slot-scope="row">
+              <template v-slot:cell(warnings)="row">
                 <ul v-if="row.item.warnings.length > 0">
                   <li v-for="(warning, index) in row.item.warnings" :key="index">
                     {{ warning }}
diff --git a/app/frontend/src/bulk/components/BulkWellDocuments.vue b/app/frontend/src/bulk/components/BulkWellDocuments.vue
index 5fdc11dd66..3ef98b1329 100644
--- a/app/frontend/src/bulk/components/BulkWellDocuments.vue
+++ b/app/frontend/src/bulk/components/BulkWellDocuments.vue
@@ -120,13 +120,13 @@
                   :show-empty="wellTableData.length === 0"
                   empty-text="No documents with well tag numbers"
                   striped>
-                  <template slot="wellTagNumber" slot-scope="row">
+                  <template v-slot:cell(wellTagNumber)="row">
                     <span :class="{ unknown: checkWellIsUnknown(row.item.wellTagNumber) }">
                       {{row.item.wellTagNumber}}
                     </span>
                     <b-spinner v-if="fetchWellFilesInProgress[row.item.wellTagNumber]" small/>
                   </template>
-                  <template slot="documents" slot-scope="row">
+                  <template v-slot:cell(documents)="row">
                     <ul>
                       <li v-for="(doc, index) in row.item.documents" :key="index" :class="{overwrite: doc.exists}">
                         {{ doc.name }}
diff --git a/app/frontend/src/submissions/components/SubmissionForm/AquiferData.vue b/app/frontend/src/submissions/components/SubmissionForm/AquiferData.vue
index 257d68eedd..837912cbbb 100644
--- a/app/frontend/src/submissions/components/SubmissionForm/AquiferData.vue
+++ b/app/frontend/src/submissions/components/SubmissionForm/AquiferData.vue
@@ -40,12 +40,12 @@ Licensed under the Apache License, Version 2.0 (the "License");
             <template slot="no-options">
                 Search for an aquifer by name or id number
             </template>
-            <template slot="option" slot-scope="option">
+            <template v-slot:cell(option)="option">
               <div>
                 {{ option.description }}
               </div>
             </template>
-            <template slot="selected-option" slot-scope="option">
+            <template v-slot:cell(selected-option)="option">
               <div>
                 {{ option.description }}
               </div>
diff --git a/app/frontend/src/submissions/components/SubmissionForm/PersonResponsible.vue b/app/frontend/src/submissions/components/SubmissionForm/PersonResponsible.vue
index aed7be3343..55cfc691d5 100644
--- a/app/frontend/src/submissions/components/SubmissionForm/PersonResponsible.vue
+++ b/app/frontend/src/submissions/components/SubmissionForm/PersonResponsible.vue
@@ -53,12 +53,12 @@ Licensed under the Apache License, Version 2.0 (the "License");
               <template slot="no-options">
                   Type to search registry...
               </template>
-              <template slot="selected-option" slot-scope="option">
+              <template v-slot:cell(selected-option)="option">
                 <div>
                   {{ personNameReg (option) }}
                 </div>
               </template>
-              <template slot="option" slot-scope="option">
+              <template v-slot:cell(option)="option">
                 <div>
                   {{ personNameReg (option) }}
                 </div>
diff --git a/app/frontend/src/submissions/components/SubmissionForm/SubmissionHistory.vue b/app/frontend/src/submissions/components/SubmissionForm/SubmissionHistory.vue
index b340f596a2..7393f391c6 100644
--- a/app/frontend/src/submissions/components/SubmissionForm/SubmissionHistory.vue
+++ b/app/frontend/src/submissions/components/SubmissionForm/SubmissionHistory.vue
@@ -35,17 +35,17 @@ Licensed under the Apache License, Version 2.0 (the "License");
             :per-page="submissionsPerPage"
             :current-page="submissionsPage"
           >
-          <template slot="report" slot-scope="data">
+          <template v-slot:cell(report)="data">
             <div>
               <router-link :to="{ name: 'SubmissionDetail', params: { id: $route.params.id, submissionId: data.item.filing_number }}">{{ data.item.well_activity_description }}</router-link>
             </div>
           </template>
-          <template slot="date_entered" slot-scope="data">
+          <template v-slot:cell(date_entered)="data">
             <div>
               <span v-if="data.item.create_date">{{ data.item.create_date | moment("MMMM Do YYYY [at] LT") }}</span>
             </div>
           </template>
-          <template slot="entered_by" slot-scope="data">
+          <template v-slot:cell(entered_by)="data">
             <div>
               {{ data.item.create_user }}
             </div>
diff --git a/app/frontend/src/submissions/components/SubmissionForm/VerticalAquiferExtents.vue b/app/frontend/src/submissions/components/SubmissionForm/VerticalAquiferExtents.vue
index 4814071386..6a264ebffb 100755
--- a/app/frontend/src/submissions/components/SubmissionForm/VerticalAquiferExtents.vue
+++ b/app/frontend/src/submissions/components/SubmissionForm/VerticalAquiferExtents.vue
@@ -29,9 +29,9 @@ Licensed under the Apache License, Version 2.0 (the "License");
         :items="tableData"
         show-empty
         empty-text="There are currently no vertical aquifer extents for this well.">
-        <template slot="start" slot-scope="data">{{parseFloat(data.item.start).toFixed(2)}} m</template>
-        <template slot="end" slot-scope="data">{{parseFloat(data.item.end).toFixed(2)}} m</template>
-        <template slot="height" slot-scope="data">{{data.item.height.toFixed(2)}} m</template>
+        <template v-slot:cell(start)="data">{{parseFloat(data.item.start).toFixed(2)}} m</template>
+        <template v-slot:cell(end)="data">{{parseFloat(data.item.end).toFixed(2)}} m</template>
+        <template v-slot:cell(height)="data">{{data.item.height.toFixed(2)}} m</template>
       </b-table>
 
       <div>
diff --git a/app/frontend/src/submissions/components/SubmissionForm/WellType.vue b/app/frontend/src/submissions/components/SubmissionForm/WellType.vue
index f1d30fb0cc..9403460782 100644
--- a/app/frontend/src/submissions/components/SubmissionForm/WellType.vue
+++ b/app/frontend/src/submissions/components/SubmissionForm/WellType.vue
@@ -126,12 +126,12 @@ Licensed under the Apache License, Version 2.0 (the "License");
               <template slot="no-options">
                   Search by well tag number or owner name
               </template>
-              <template slot="option" slot-scope="option">
+              <template v-slot:cell(option)="option">
                 <div>
                   {{ option.well_tag_number }} ({{ option.owner_full_name }})
                 </div>
               </template>
-              <template slot="selected-option" slot-scope="option">
+              <template v-slot:cell(selected-option)="option">
                 <div>
                   {{ option.well_tag_number }}
                 </div>
diff --git a/app/frontend/src/submissions/components/SubmissionPreview/SubmissionPreview.vue b/app/frontend/src/submissions/components/SubmissionPreview/SubmissionPreview.vue
index 8555f96940..a17545679e 100644
--- a/app/frontend/src/submissions/components/SubmissionPreview/SubmissionPreview.vue
+++ b/app/frontend/src/submissions/components/SubmissionPreview/SubmissionPreview.vue
@@ -193,14 +193,14 @@ Licensed under the Apache License, Version 2.0 (the "License");
             'water_bearing_estimated_flow',
             'observations'
           ]">
-          <template slot="description" slot-scope="data">{{data.item.lithology_raw_data}}</template>
-          <template slot="from" slot-scope="data">{{data.item.start}}</template>
-          <template slot="to" slot-scope="data">{{data.item.end}}</template>
-          <template slot="colour" slot-scope="data">{{codeToDescription('lithology_colours', data.item.lithology_colour) }}</template>
-          <template slot="hardness" slot-scope="data">{{codeToDescription('lithology_hardness_codes', data.item.lithology_hardness) }}</template>
-          <template slot="moisture" slot-scope="data">{{codeToDescription('lithology_moisture_codes', data.item.lithology_moisture) }}</template>
-          <template slot="descriptor" slot-scope="data">{{codeToDescription('lithology_descriptors', data.item.lithology_description) }}</template>
-          <template slot="observations" slot-scope="data">{{ data.item.lithology_observation }}</template>
+          <template v-slot:cell(description)="data">{{data.item.lithology_raw_data}}</template>
+          <template v-slot:cell(from)="data">{{data.item.start}}</template>
+          <template v-slot:cell(to)="data">{{data.item.end}}</template>
+          <template v-slot:cell(colour)="data">{{codeToDescription('lithology_colours', data.item.lithology_colour) }}</template>
+          <template v-slot:cell(hardness)="data">{{codeToDescription('lithology_hardness_codes', data.item.lithology_hardness) }}</template>
+          <template v-slot:cell(moisture)="data">{{codeToDescription('lithology_moisture_codes', data.item.lithology_moisture) }}</template>
+          <template v-slot:cell(descriptor)="data">{{codeToDescription('lithology_descriptors', data.item.lithology_description) }}</template>
+          <template v-slot:cell(observations)="data">{{ data.item.lithology_observation }}</template>
         </b-table>
       </div>
     </fieldset>
@@ -216,10 +216,10 @@ Licensed under the Apache License, Version 2.0 (the "License");
           :fields="['start', 'end', 'material', 'observations']"
           show-empty
         >
-          <template slot="start" slot-scope="data">{{data.item.start}} ft</template>
-          <template slot="end" slot-scope="data">{{data.item.end}} ft</template>
-          <template slot="material" slot-scope="data">{{codeToDescription('decommission_materials', data.item.material)}}</template>
-          <template slot="observations" slot-scope="data">{{codeToDescription('decommission_materials', data.item.observations)}}</template>
+          <template v-slot:cell(start)="data">{{data.item.start}} ft</template>
+          <template v-slot:cell(end)="data">{{data.item.end}} ft</template>
+          <template v-slot:cell(material)="data">{{codeToDescription('decommission_materials', data.item.material)}}</template>
+          <template v-slot:cell(observations)="data">{{codeToDescription('decommission_materials', data.item.observations)}}</template>
         </b-table>
       </div>
     </fieldset>
@@ -235,11 +235,11 @@ Licensed under the Apache License, Version 2.0 (the "License");
             :fields="['from', 'to', 'casing_type', 'casing_material', 'diameter', 'wall_thickness', 'drive_shoe_status']"
             show-empty>
 
-          <template slot="from" slot-scope="data">{{data.item.start}}{{data.item.start ? ' ft' : '' }}</template>
-          <template slot="to" slot-scope="data">{{data.item.end}}{{data.item.end ? ' ft' : '' }}</template>
-          <template slot="casing_type" slot-scope="data">{{codeToDescription('casing_codes', data.item.casing_code)}}</template>
-          <template slot="casing_material" slot-scope="data">{{codeToDescription('casing_materials', data.item.casing_material)}}</template>
-          <template slot="drive_shoe_status" slot-scope="data">{{codeToDescription('drive_shoe_status', data.item.drive_shoe_status)}}</template>
+          <template v-slot:cell(from)="data">{{data.item.start}}{{data.item.start ? ' ft' : '' }}</template>
+          <template v-slot:cell(to)="data">{{data.item.end}}{{data.item.end ? ' ft' : '' }}</template>
+          <template v-slot:cell(casing_type)="data">{{codeToDescription('casing_codes', data.item.casing_code)}}</template>
+          <template v-slot:cell(casing_material)="data">{{codeToDescription('casing_materials', data.item.casing_material)}}</template>
+          <template v-slot:cell(drive_shoe_status)="data">{{codeToDescription('drive_shoe_status', data.item.drive_shoe_status)}}</template>
 
         </b-table>
       </div>
@@ -289,8 +289,8 @@ Licensed under the Apache License, Version 2.0 (the "License");
               :fields="['from', 'to']"
               show-empty
           >
-            <template slot="from" slot-scope="data">{{data.item.start}} ft</template>
-            <template slot="to" slot-scope="data">{{data.item.end}} ft</template>
+          <template v-slot:cell(from)="data">{{data.item.start}} ft</template>
+          <template v-slot:cell(to)="data" >{{data.item.end}} ft</template>
           </b-table>
         </b-col>
       </b-row>
@@ -332,9 +332,9 @@ Licensed under the Apache License, Version 2.0 (the "License");
               :fields="['from', 'to', 'diameter', 'assembly_type', 'slot_size']"
               show-empty
               >
-            <template slot="from" slot-scope="data">{{data.item.start}} ft</template>
-            <template slot="to" slot-scope="data">{{data.item.end}} ft</template>
-            <template slot="assembly_type" slot-scope="data">{{codeToDescription('screen_assemblies', data.item.assembly_type)}}</template>
+            <template v-slot:cell(from)="data">{{data.item.start}} ft</template>
+            <template v-slot:cell(to)="data">{{data.item.end}} ft</template>
+            <template v-slot:cell(assembly_type)="data">{{codeToDescription('screen_assemblies', data.item.assembly_type)}}</template>
           </b-table>
         </b-col>
       </b-row>
@@ -458,9 +458,9 @@ Licensed under the Apache License, Version 2.0 (the "License");
                   'comments'
                 ]"
             show-empty>
-            <template slot="pumping_test_description" slot-scope="data">{{codeToDescription('pumping_test_description_codes', data.item.pumping_test_description)}}</template>
-            <template slot="boundary_effect" slot-scope="data">{{codeToDescription('boundary_effect_codes', data.item.boundary_effect)}}</template>
-            <template slot="analysis_method" slot-scope="data">{{codeToDescription('analysis_method_codes', data.item.analysis_method)}}</template>
+            <template v-slot:cell(pumping_test_description)="data">{{codeToDescription('pumping_test_description_codes', data.item.pumping_test_description)}}</template>
+            <template v-slot:cell(boundary_effect)="data">{{codeToDescription('boundary_effect_codes', data.item.boundary_effect)}}</template>
+            <template v-slot:cell(analysis_method)="data">{{codeToDescription('analysis_method_codes', data.item.analysis_method)}}</template>
         </b-table>
       </div>
     </fieldset>
diff --git a/app/frontend/src/surveys/views/Surveys.vue b/app/frontend/src/surveys/views/Surveys.vue
index 9fb0cf39f0..b26aeb7763 100644
--- a/app/frontend/src/surveys/views/Surveys.vue
+++ b/app/frontend/src/surveys/views/Surveys.vue
@@ -13,16 +13,16 @@
           :per-page="perPage"
           :current-page="currentPage"
         >
-          <template slot="survey_page" slot-scope="row">
+          <template v-slot:cell(survey_page)="row">
             {{formatPageName(row.item.survey_page)}}
           </template>
-          <template slot="survey_link" slot-scope="row">
+          <template v-slot:cell(survey_link)="row">
             <a :href="row.item.survey_link" target="_blank">{{row.item.survey_link}}</a>
           </template>
-          <template slot="survey_enabled" slot-scope="row">
+          <template v-slot:cell(survey_enabled)="data">
             <b-form-checkbox v-model="row.item.survey_enabled" name="check-button" @input="toggleSurveyEnabled(row.item.survey_guid, row.item.survey_enabled)"/>
           </template>
-          <template slot="remove" slot-scope="row">
+          <template v-slot:cell(remove)="data">
             <b-btn type="button" variant="outline-danger" size="sm" @click="handleRemoveSurvey(row.item.survey_guid)"><i class="fa fa-trash"></i></b-btn>
           </template>
         </b-table>
diff --git a/app/frontend/src/wells/views/EditWellAquifers.vue b/app/frontend/src/wells/views/EditWellAquifers.vue
index b04d90aae8..88aa16e7e0 100644
--- a/app/frontend/src/wells/views/EditWellAquifers.vue
+++ b/app/frontend/src/wells/views/EditWellAquifers.vue
@@ -105,12 +105,12 @@ Licensed under the Apache License, Version 2.0 (the "License");
                             <template slot="no-options">
                               Search for an aquifer by name or id number
                             </template>
-                            <template slot="option" slot-scope="option">
+                            <template v-slot:cell(option)="option">
                               <div>
                                 {{ option.description }}
                               </div>
                             </template>
-                            <template slot="selected-option" slot-scope="option">
+                            <template v-slot:cell(selected-option)="option">
                               <div>
                                 {{ option.description }}
                               </div>
diff --git a/app/frontend/src/wells/views/WellDetail.vue b/app/frontend/src/wells/views/WellDetail.vue
index 78ee449f14..b0401b9256 100644
--- a/app/frontend/src/wells/views/WellDetail.vue
+++ b/app/frontend/src/wells/views/WellDetail.vue
@@ -243,7 +243,7 @@ Licensed under the Apache License, Version 2.0 (the "License");
             :current-page="submissionsPage"
             :fields="activity_fields"
           >
-            <template slot="create_date" slot-scope="data">
+            <template v-slot:cell(create_date)="data">
               <div>
                 {{ data.item.create_date | moment("MMMM Do YYYY [at] LT") }}
               </div>
@@ -306,9 +306,9 @@ Licensed under the Apache License, Version 2.0 (the "License");
             :items="well.lithologydescription_set"
             show-empty
             :fields="lithology_fields">
-            <template slot="start" slot-scope="data">{{ data.item.start | excludeZeroDecimals }}</template>
-            <template slot="end" slot-scope="data">{{ data.item.end | excludeZeroDecimals }}</template>
-            <template slot="water_bearing_estimated_flow" slot-scope="data">{{ data.item.water_bearing_estimated_flow | excludeZeroDecimals }}</template>
+            <template v-slot:cell(start)="data">{{ data.item.start | excludeZeroDecimals }}</template>
+            <template v-slot:cell(end)="data">{{ data.item.end | excludeZeroDecimals }}</template>
+            <template v-slot:cell(water_bearing_estimated_flow)="data">{{ data.item.water_bearing_estimated_flow | excludeZeroDecimals }}</template>
           </b-table>
         </fieldset>
 
@@ -323,17 +323,17 @@ Licensed under the Apache License, Version 2.0 (the "License");
                 :fields="['from', 'to', 'casing_type', 'casing_material', 'diameter', 'wall_thickness', 'drive_shoe']"
                 show-empty>
 
-              <template slot="from" slot-scope="data">{{ data.item.start | excludeZeroDecimals }}</template>
-              <template slot="HEAD_from" slot-scope="data">{{ data.label }} (ft bgl)</template>
-              <template slot="to" slot-scope="data">{{ data.item.end | excludeZeroDecimals }}</template>
-              <template slot="HEAD_to" slot-scope="data">{{ data.label }} (ft bgl)</template>
-              <template slot="casing_type" slot-scope="data">{{codeToDescription('casing_codes', data.item.casing_code)}}</template>
-              <template slot="casing_material" slot-scope="data">{{codeToDescription('casing_materials', data.item.casing_material)}}</template>
-              <template slot="HEAD_diameter" slot-scope="data">{{ data.label }} (in)</template>
-              <template slot="diameter" slot-scope="data">{{ data.item.diameter | excludeZeroDecimals }}</template>
-              <template slot="HEAD_wall_thickness" slot-scope="data">{{ data.label }} (in)</template>
-              <template slot="wall_thickness" slot-scope="data">{{ data.item.wall_thickness | excludeZeroDecimals }}</template>
-              <template slot="drive_shoe" slot-scope="data">{{codeToDescription('drive_shoe', data.item.drive_shoe_status)}}</template>
+              <template v-slot:cell(from)="data">{{ data.item.start | excludeZeroDecimals }}</template>
+              <template v-slot:cell(HEAD_from)="data">{{ data.label }} (ft bgl)</template>
+              <template v-slot:cell(to)="data">{{ data.item.end | excludeZeroDecimals }}</template>
+              <template v-slot:cell(HEAD_to)="data">{{ data.label }} (ft bgl)</template>
+              <template v-slot:cell(casing_type)="data">{{codeToDescription('casing_codes', data.item.casing_code)}}</template>
+              <template v-slot:cell(casing_material)="data">{{codeToDescription('casing_materials', data.item.casing_material)}}</template>
+              <template v-slot:cell(HEAD_diameter)="data">{{ data.label }} (in)</template>
+              <template v-slot:cell(diameter)="data">{{ data.item.diameter | excludeZeroDecimals }}</template>
+              <template v-slot:cell(HEAD_wall_thickness)="data">{{ data.label }} (in)</template>
+              <template v-slot:cell(wall_thickness)="data">{{ data.item.wall_thickness | excludeZeroDecimals }}</template>
+              <template v-slot:cell(drive_shoe)="data">{{codeToDescription('drive_shoe', data.item.drive_shoe_status)}}</template>
             </b-table>
           </div>
         </fieldset>
@@ -382,10 +382,10 @@ Licensed under the Apache License, Version 2.0 (the "License");
                   :fields="['from', 'to']"
                   show-empty
               >
-                <template slot="HEAD_from" slot-scope="data">{{data.label}} (ft bgl)</template>
-                <template slot="from" slot-scope="data">{{ data.item.start | excludeZeroDecimals }}</template>
-                <template slot="HEAD_to" slot-scope="data">{{data.label}} (ft bgl)</template>
-                <template slot="to" slot-scope="data">{{ data.item.end | excludeZeroDecimals }}</template>
+                <template v-slot:cell(HEAD_from)="data">{{data.label}} (ft bgl)</template>
+                <template v-slot:cell(from)="data">{{ data.item.start | excludeZeroDecimals }}</template>
+                <template v-slot:cell(HEAD_to)="data">{{data.label}} (ft bgl)</template>
+                <template v-slot:cell(to)="data">{{ data.item.end | excludeZeroDecimals }}</template>
               </b-table>
             </b-col>
           </b-row>
@@ -421,13 +421,13 @@ Licensed under the Apache License, Version 2.0 (the "License");
                   :fields="['from', 'to', 'diameter', 'assembly_type', 'slot_size']"
                   show-empty
                   >
-                <template slot="HEAD_from" slot-scope="data">{{data.label}} (ft bgl)</template>
-                <template slot="from" slot-scope="data">{{data.item.start}}</template>
-                <template slot="HEAD_to" slot-scope="data">{{data.label}} (ft bgl)</template>
-                <template slot="to" slot-scope="data">{{data.item.end}}</template>
-                <template slot="HEAD_diameter" slot-scope="data">{{data.label}} (in)</template>
-                <template slot="diameter" slot-scope="data">{{data.item.diameter}}</template>
-                <template slot="assembly_type" slot-scope="data">{{codeToDescription('screen_assemblies', data.item.assembly_type)}}</template>
+                <template v-slot:cell(HEAD_from)="data">{{data.label}} (ft bgl)</template>
+                <template v-slot:cell(from)="data">{{data.item.start}}</template>
+                <template v-slot:cell(HEAD_to)="data">{{data.label}} (ft bgl)</template>
+                <template v-slot:cell(to)="data">{{data.item.end}}</template>
+                <template v-slot:cell(HEAD_diameter)="data">{{data.label}} (in)</template>
+                <template v-slot:cell(diameter)="data">{{data.item.diameter}}</template>
+                <template v-slot:cell(assembly_type)="data">{{codeToDescription('screen_assemblies', data.item.assembly_type)}}</template>
               </b-table>
             </b-col>
           </b-row>
@@ -499,12 +499,12 @@ Licensed under the Apache License, Version 2.0 (the "License");
                   'comments'
                 ]"
                 show-empty>
-                <template slot="pumping_test_description" slot-scope="data">{{codeToDescription('pumping_test_description_codes', data.item.pumping_test_description)}}</template>
-                <template slot="boundary_effect" slot-scope="data">{{codeToDescription('boundary_effect_codes', data.item.boundary_effect)}}</template>
-                <template slot="analysis_method" slot-scope="data">{{codeToDescription('analysis_method_codes', data.item.analysis_method)}}</template>
-                <template slot="storativity" slot-scope="data">{{parseFloat(data.item.storativity).toString()}}</template>
-                <template slot="transmissivity" slot-scope="data">{{parseFloat(data.item.transmissivity).toString()}}</template>
-                <template slot="hydraulic_conductivity" slot-scope="data">{{parseFloat(data.item.hydraulic_conductivity).toString()}}</template>
+                <template v-slot:cell(pumping_test_description)="data">{{codeToDescription('pumping_test_description_codes', data.item.pumping_test_description)}}</template>
+                <template v-slot:cell(boundary_effect)="data">{{codeToDescription('boundary_effect_codes', data.item.boundary_effect)}}</template>
+                <template v-slot:cell(analysis_method)="data">{{codeToDescription('analysis_method_codes', data.item.analysis_method)}}</template>
+                <template v-slot:cell(storativity)="data">{{parseFloat(data.item.storativity).toString()}}</template>
+                <template v-slot:cell(transmissivity)="data">{{parseFloat(data.item.transmissivity).toString()}}</template>
+                <template v-slot:cell(hydraulic_conductivity)="data">{{parseFloat(data.item.hydraulic_conductivity).toString()}}</template>
             </b-table>
           </div>
         </fieldset>