VueJS Передача параметров во всплывающее окно "Диалог" - PullRequest
Новая
       6

VueJS Передача параметров во всплывающее окно "Диалог"

0 голосов
/ 08 января 2019

У меня возникла дилемма. Я создаю приложение для отслеживания времени студентов. На одной вкладке вы можете увидеть список студентов и их общее количество часов за квартал, а также есть кнопка просмотра дополнительных сообщений, которая открывает диалоговое окно «Всплывающие окна», которое Вы показываете профиль для этого конкретного студента.

Как и сейчас, если вы нажмете кнопку, у меня будет "@ click =" dialog = true ", чтобы открыть диалоговое окно, и все!

Мой вопрос, как я могу передать идентификатор студента на эту страницу, чтобы я мог связаться с вами API и получить информацию о студенте

Студенческий вид enter image description here

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

1 Ответ

0 голосов
/ 08 января 2019

Вы можете определить метод с именем 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>
...