VueJS将参数传递给弹出“对话框”

Posted 2023-02-22

【中文标题】VueJS将参数传递给弹出“对话框”

【英文标题】：VueJS Passing parameters to a Popup "Dialog"

【发布时间】：2019-06-03 09:25:01

【问题描述】：

我有一个难题正在构建一个应用程序来跟踪学生的时间，在一个选项卡中，您可以看到学生列表及其本季度的总小时数，并且有一个查看更多按钮打开一个对话框“弹出窗口”您显示该特定学生的个人资料。

现在，如果您单击按钮，我就有“@click="dialog = true" 来打开对话框，就是这样！

我的问题是如何将学生 ID 传递到此页面，以便我可以联系 ye API 并获取学生信息

学生观

<v-data-table :headers="headers"
                :pagination.sync="pagination"
                :items="filteredResources"
                :search="search">
    <template slot="items" slot-scope="props">
      <td> props.item.sid </td>
      <td class="text-xs-left"> props.item.firstName </td>
      <td class="text-xs-left"> props.item.lastName </td>
      <td class="text-xs-left"> props.item.totalHours </td>
      <td class="text-xs-left"> props.item.reason </td>
      <td class="text-xs-left">
        <v-btn fab dark small
               color="primary"
               @click="dialog = true">
          <v-icon dark>edit</v-icon>
        </v-btn>
      </td>
    </template>
    <v-alert slot="no-results" :value="true" color="error" icon="warning">
      Your search for " searchQuery " found no results.
    </v-alert>
  </v-data-table>

脚本

<script>
 import axios from 'axios'
 import StudentProfile from './studentsProfile'
 export default 
   components: 
  'studentsProfile': StudentProfile
     ,
    data() 
     return 
    pagination: 
      rowsPerPage: 25
    ,
    dialog: false,
    notifications: false,
    sound: true,
    widgets: false,
    searchQuery: '',
    headers: [
      
        text: 'SID',
        align: 'left',
        sortable: false,
        value: 'name'
      ,
       text: 'Firts Name', value: 'firtsname' ,
       text: 'Last Name', value: 'fat' ,
       text: 'Total Hours', value: 'carbs' ,
       text: 'Reason', value: 'protein' ,
       text: 'View More', value: 'view'
    ],
    summary: []
  
,
created() 
  axios.get('/api/StudentSummary')
    .then(response => 
      // JSON responses are automatically parsed.
      this.summary = response.data
    )
    .catch(e => 
      this.errors.push(e)
    )
,
computed: 
  filteredResources() 
    if (this.searchQuery) 
      return this.summary.filter((item) => 
        return item.sid.startsWith(this.searchQuery);
        //return item.searchQuery.startsWith(this.searchQuery);
        //return 
   item.firstName.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
     else 
      return this.summary;
    
  
     

【问题讨论】：

v-alert，给你 :)

不要使用@click="dialog = true"，而是使用@click="openDialog(props.item.sid)"，并在methods中创建openDialog(sid)，它将负责为给定sid打开模式并从API加载数据

【参考方案1】：

您可以定义一个名为editStudent 的方法并将sid 作为参数传递：

模板：

  <v-btn fab dark small
           color="primary"
           @click="editStudent(props.item.sid )">

方法：

    methods:
         editStudent(id)
              this.dialog=true;
              this.editedSid=id;
           
         

<v-dialog v-model="dialog" >

  <v-btn fab dark small color="primary" @click="editStudent(props.item.sid)">
    <v-icon dark>edit</v-icon>
  </v-btn>

  <!-- the dialog conent -->

</v-dialog>