VueJS Passing parameters to a Popup "Dialog"
11,402
You could define a method called editStudent
and pass sid
as parameter :
Template :
<v-btn fab dark small
color="primary"
@click="editStudent(props.item.sid )">
methods :
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>
Author by
user3376642
Updated on June 22, 2022Comments
-
user3376642 almost 2 years
I Have a Dilemma am building an app to track the students time, in one tab you can see the list of students and their total hours for the quarter and there is a view more button that opens a dialog "Popup windows" that you show the profile for that specific student.
As right now if you click the button I have "@click="dialog = true" to open the dialog box and that's it!
My question how can I pass the student id to this page so I can contact ye API and get the student information
Student View
<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
<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; } } } }