时间戳

首页 > 解决方案 > VueJS将参数传递给弹出“对话框”

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

问题描述

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

现在，如果您单击按钮，我有“@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;
    }
  }
 }    
}

标签： javascriptvue.jsvuejs2vue-componentvuetify.js

解决方案

您可以定义一个方法调用并作为参数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" width="500">

  <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>

推荐阅读