Relation of v-select and v-checkbox on two others components

i need help for my application in Vuejs , vuetify ,

i have two components :

1- MyTableFirst.vue 2- FirstCall.vue

I want to do this : if i check checkbox on the MyTableFirst.vue , the v-select it will be showed.

Here is my code :

1- MyTableFirst.vue

<template>
    <v-data-table class="blue-header" :headers="headers" :items="items" density="compact" hover="true"
        no-data-text="Pas de données disponibles" :fixed-header="true" :items-per-page="-1" :height="250"
        item-value="seq" select-strategy="single" show-select hide-default-footer v-model:selected="selectedItems">


        <template v-slot:[`item.select_sortant`]="{ item }">
            <!-- <div v-if="isSelected(item)"> -->
            <v-select :items="listActions" v-model="item.action" item-title="action"
                item-value="seq">
            </v-select>
            <!-- </div> --> 
        </template>

        <template v-slot:[`item.calldate_sortant`]="{ item }">
            {{ formatDateTime(item.raw.calldate_sortant) }}
        </template>


    </v-data-table>
</template>

Here is my code of FirstCall.vue:

<MyTableFirst :headers="headers" :items="list" v-model="selected">
</MyTableFirst>

<script>
const selected = ref([]);
        watch(
            selected,
            (newVal) => {
                console.log('Selected items:', newVal);
            },
            { deep: true }
        );
        const save = async () => {
            console.log(selected.value)

        };


</script>

Solution

It's pretty straight-forward:

use v-model on the VDataTable to get the selected elements (there is no v-model:selected)
put a v-if on the VSelect, checking if the item is selected

Here it is in a snippet:

const { createApp, ref } = Vue;
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = {
  template: `
      <v-app>
        <v-main>
          <v-data-table 
            :items="items"
            select-strategy="single" 
            show-select
            v-model="selectedItem"
          >
            <template #item.val="{ item }">
              <v-select
                v-if="selectedItem[0] === item.id"
                v-model="item.val"
                :items="[1,10,100]"
              />
              <span v-else>{{item.val}}</span>
              
            </template>
          </v-data-table>
          {{ {selectedItem} }}
        </v-main>
      </v-app>
  `,
  data(){
    
    return {
      items: Array.from({length: 3}, (_,i) => (i++, {id: i, name: `Item ${i}`, val: 10})),
      selectedItem: [] // always an array, even with selectStrategy="single"
    }
  }

}
createApp(app).use(vuetify).mount('#app')

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.css" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app"></div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.js"></script>