Add id element on Vue template

Question

I would like to add id elements to the next VUE templates. So, I can identify these html elements by their ids.

First scenario, I would like to add an id to the submit (ok) button

<core-dialog
      v-if="deleteDialog.display"
      v-model="deleteDialog.display"
      type="confirmation"
      width="500px"
      :ok-button-text="$t('common.delete')"
      @click:ok="
        deleteDialog.display = false;
        deleteDialog.rfqToDelete.remove({ shouldShowNotification: true });"
      @click:cancel="cancelDelete"
    >

On this second scenario, I would like to add an id on the footer element

<v-data-table
            expand-icon="mdi-chevron-right"
            style="border: solid 1px #e2e2e2; border-radius: 5px; margin: 0!important;min-width:900px "
            data-cy="rfqs-table"
            :headers="groupedByQuoteHeaders"
            :items="loadedRfqs"
            :item-class="itemRowBackground"
            :loading="(isRfqsFindPending || isSearchPending )"
            show-expand
            :expanded.sync="expendRow"
            item-key="_id"
            :footer-props="{ 'items-per-page-text': $t('common.rowPerPageText'),
                             'page-text': `{0}-{1} ${$t('common.of')} {2}`}"
            :no-results-text="$t('common.noDataAvailable')"
            :no-data-text="$t('common.noDataAvailable')"
            :loading-text="$t('common.loadingItems')"
            @current-items="getFiltered"
            @click:row="(item, slot) => slot.expand(!slot.isExpanded)"
            @item-expanded="loadPart"
          >

Answer 1

You could use a custom footer as the respective slot in the table component:

let tmpl = document.getElementById('tmpl-app')
new Vue({
  el: '#app',
  template: tmpl.content.cloneNode(true).innerHTML
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template id="tmpl-app">
<v-data-table
            expand-icon="mdi-chevron-right"
            style="border: solid 1px #e2e2e2; border-radius: 5px; margin: 0!important;min-width:900px "
            data-cy="rfqs-table"
            :headers="groupedByQuoteHeaders"
            :items="loadedRfqs"
            :item-class="itemRowBackground"
            :loading="(isRfqsFindPending || isSearchPending )"
            show-expand
            :expanded.sync="expendRow"
            item-key="_id"
            :footer-props="{ 'items-per-page-text': $t('common.rowPerPageText'),
                             'page-text': `{0}-{1} ${$t('common.of')} {2}`}"
            :no-results-text="$t('common.noDataAvailable')"
            :no-data-text="$t('common.noDataAvailable')"
            :loading-text="$t('common.loadingItems')"
            @current-items="getFiltered"
            @click:row="(item, slot) => slot.expand(!slot.isExpanded)"
            @item-expanded="loadPart"
          >
          <div v-slot="footer" id="your-custom-id">
          
          </div>
          </v-data-table>
</template>
<div id="app"></div>