VueJS Passing parameters to a Popup "Dialog"

Question

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

Answer 1

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>