如何在Vuetify表中打开模式？

如何解决如何在Vuetify表中打开模式？

我有一个组件，它实际上是一个包含数据的表。表的最后一列是操作列，单击该按钮时有一个按钮，我想打开包含数据的模式。我发现vuetify具有模式，但它是独立的组件。我想知道如何整合这两个组件。

我也想将数据传递给可调用组件

Index.vue

<template>
  <v-container fluid>
    <v-row align="center">

      <v-col cols="12" sm="6">
        <v-select
          v-model="selected"
          :items="projects"
          :menu-props="{ maxHeight: '400' }"
          label="Select"
          hint="Pick Project"
          persistent-hint
          @change="getTickets()"
        ></v-select>
      </v-col>
      <v-col cols="12">
        <v-card>
          <v-card-title>Tickets
            <v-spacer></v-spacer>

            <v-text-field
              v-model="search"
              append-icon="mdi-magnify"
              label="Search"
              single-line
              hide-details
              show-select
              item-key="name"
            ></v-text-field>
          </v-card-title>
         

          <v-simple-table>
            <template v-slot:default>
              <thead>
              <tr>
                <th class="text-left">ID</th>
                <th class="text-left">Subject</th>
                <th class="text-left">Priority</th>
                <th class="text-left">Requester</th>

                <th class="text-left">Type</th>
                <th class="text-left">Action</th>

              </tr>
              </thead>
              <tbody>
              <tr v-for="item in desserts" :key="item.id">
                <td>{{ item.id }}</td>
                <td>{{ item.subject}}</td>
                <td>{{ getPriority (item.priority) }}</td>
                <td>{{ item.requester_id }}</td>

                <td>{{ getType(item.type_id)}}</td>
                <td>Modal Button Here</td>
              </tr>
              </tbody>
            </template>
          </v-simple-table>
          <v-pagination
            v-model="pagination.current"
            :length="pagination.total"
            @input="onPageChange"
          ></v-pagination>
        </v-card>
      </v-col>
    </v-row>
     
  </v-container>

</template>

<script>
import Vue from 'vue'
import axios from 'axios';
import {api} from "../../config";
import AxiosPlugin from 'vue-axios-cors';

Vue.use(AxiosPlugin)
export default {
  data() {
    return {
      selected: [],e7: [],projects: [],loadingprop: true,selecteddatatable: [],search: "",headers: [
        { text: "ID",value: "id" },{ text: "Model",value: "model" },{ text: "Priority",value: "priority" },{ text: "Requester",value: "requester_id" },{ text: "Status",value: "status" },{ text: "Subject",value: "subject" },{ text: "Type",value: "type_id" },],desserts: null,pagination: {
        current: 1,total: 0
      }

    }
  },beforeMount() {
    this.$axios.get(api.path('getProjects'),{}).then((res) => {
      let project_array = [];
      for (let i = 0; i < res.data.length; i++) {
        project_array.push(res.data[i].url);
      }
      this.projects = project_array;
    })
  },methods: {
    getTickets() {

      axios.get(this.selected + 'api/tickets/fetch_tickets?page=' + this.pagination.current,{

      }).then((response) => {
        // console.log(res.data.data)
        // this.desserts = res.data.data;
        // this.loadingprop = false;
        this.desserts = response.data.data;
        this.pagination.current = response.data.current_page;
        this.pagination.total = response.data.last_page;
        console.log(response.data.data);
      }).catch((err) => {
        this.handleErrors(err.response.data.errors);
      })
        .then(() => {
          this.loading = false;
        });
    },onPageChange() {
      this.getTickets();
    },getPriority(priority){
      if(priority == 0){
        return "Low";
      }
      if(priority == 1){
        return "Normal";
      }
      if(priority == 2){
        return "High";
      }
      if(priority == 3){
        return "Urgent";
      }
    },getType(type){
      if(type == 0){
        return "Question";
      }
      if(type == 1){
       return "Incident";
      }
      if(type == 2){
         return "Problem";
      }
      if(type == 3){
        return "Task";
      }
    }
  },mounted() {
    this.getTickets();
  }

}
</script>

模式组件

<template>
  <v-row justify="center">
    <v-dialog v-model="dialog" fullscreen hide-overlay transition="dialog-bottom-transition">
      <template v-slot:activator="{ on,attrs }">
        <v-btn
          color="primary"
          dark
          v-bind="attrs"
          v-on="on"
        >
          Open Dialog
        </v-btn>
      </template>
      <v-card>
        <v-toolbar dark color="primary">
          <v-btn icon dark @click="dialog = false">
            <v-icon>mdi-close</v-icon>
          </v-btn>
          <v-toolbar-title>Settings</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-toolbar-items>
            <v-btn dark text @click="dialog = false">Save</v-btn>
          </v-toolbar-items>
        </v-toolbar>
        <v-list three-line subheader>
          <v-subheader>User Controls</v-subheader>
          <v-list-item>
            <v-list-item-content>
              <v-list-item-title>Content filtering</v-list-item-title>
              <v-list-item-subtitle>Set the content filtering level to restrict apps that can be downloaded</v-list-item-subtitle>
            </v-list-item-content>
          </v-list-item>
          <v-list-item>
            <v-list-item-content>
              <v-list-item-title>Password</v-list-item-title>
              <v-list-item-subtitle>Require password for purchase or use password to restrict purchase</v-list-item-subtitle>
            </v-list-item-content>
          </v-list-item>
        </v-list>
        <v-divider></v-divider>
        <v-list three-line subheader>
          <v-subheader>General</v-subheader>
          <v-list-item>
            <v-list-item-action>
              <v-checkbox v-model="notifications"></v-checkbox>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title>Notifications</v-list-item-title>
              <v-list-item-subtitle>Notify me about updates to apps or games that I downloaded</v-list-item-subtitle>
            </v-list-item-content>
          </v-list-item>
          <v-list-item>
            <v-list-item-action>
              <v-checkbox v-model="sound"></v-checkbox>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title>Sound</v-list-item-title>
              <v-list-item-subtitle>Auto-update apps at any time. Data charges may apply</v-list-item-subtitle>
            </v-list-item-content>
          </v-list-item>
          <v-list-item>
            <v-list-item-action>
              <v-checkbox v-model="widgets"></v-checkbox>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title>Auto-add widgets</v-list-item-title>
              <v-list-item-subtitle>Automatically add home screen widgets</v-list-item-subtitle>
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-card>
    </v-dialog>
  </v-row>
</template>

<script>
  export default {
    data () {
      return {
        dialog: false,notifications: false,sound: true,widgets: false,}
    },}
</script>