vue.js - Combine tabs with list item and v-dialog in vuejs

Question

I wanted to create the simple mail app where i have 4 tabs (inbox , compose , trash , sent) and inside each will have list of item (v-list-item)(mails with first name, last name and title).so when the user clicks the item then beautiful v-dialog box displays the other content of the mail.

I have written all in the sand box below. but the dialog box is not displaying anything. please help me and try to make it as amazing as you can.

code sandbox - https://codesandbox.io/s/headless-sea-mvsr9?file=/src/App.vue

<v-card>
      <v-tabs dark background-color="teal darken-3" show-arrows>
        <v-tabs-slider color="teal lighten-3"></v-tabs-slider>

        <v-tab
          v-for="(item, index) in items"
          :class="{ active: currentTab === index }"
          @click="currentTab = index"
          :key="item"
          >{{ item }}</v-tab
        >
      </v-tabs>
      <v-tabs-items v-model="tab">
        <v-card flat>
          <div v-show="currentTab === 0">
            <v-card-text>Tab0 content</v-card-text>
          </div>
          <div v-show="currentTab === 1">
            <v-dialog transition="dialog-bottom-transition" max-width="600">
              <template v-slot:activator="{ on, attrs }">
                <template v-for="message in parents">
                  <v-list-item
                    :key="message"
                    :value="message.session_Id"
                    v-if="message.type == 'new'"
                    v-bind="attrs"
                    v-on="on"
                  >
                    <v-list-item-content>
                      <v-list-item-title
                        v-if="message.sender._id == '11'"
                        v-text="
                          message.reciever.name.first_Name +
                          ' ' +
                          message.reciever.name.last_Name
                        "
                      />
                      <v-list-item-title
                        v-else
                        v-text="
                          message.sender.name.first_Name +
                          ' ' +
                          message.sender.name.last_Name
                        "
                      />
                      <v-list-item-subtitle v-text="'hi'" />
                    </v-list-item-content>
                  </v-list-item>
                </template>
              </template>
              <template v-slot:default="dialog">
                // simple dialog just for trials
                <v-card>
                  <v-toolbar color="primary" dark
                    >Opening from the bottom</v-toolbar
                  >
                  <v-card-text>
                    <div class="text-h2 pa-12">Hello world!</div>
                  </v-card-text>
                  <v-card-actions class="justify-end">
                    <v-btn text @click="dialog.value = false">Close</v-btn>
                  </v-card-actions>
                </v-card>
              </template>
            </v-dialog>
          </div>
          <div v-show="currentTab === 2">
            <v-card-text>Tab2 content</v-card-text>
          </div>
          <div v-show="currentTab === 3">
            <v-card-text>Tab3 content</v-card-text>
          </div>
          <div v-show="currentTab === 4">
            <v-card-text>Tab4 content</v-card-text>
          </div>
        </v-card>
      </v-tabs-items>
    </v-card>

Answer 1

等待大神答复