VueJ 팝업 "대화 상자"에 매개 변수 전달

VueJ 팝업 "대화 상자"에 매개 변수 전달

I Have a Delema는 학생 시간을 추적하는 앱을 만들고 있습니다.한 탭에서 학생 목록과 해당 분기의 총 시간을 볼 수 있습니다.또한 특정 학생의 프로필을 보여주는 팝업 창 대화상자를 여는 추가 보기 버튼이 있습니다.

지금처럼 버튼을 클릭하면 "@click="dialog = true"로 대화 상자가 열립니다.

어떻게 하면 학생증을 이 페이지에 넘겨서 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;
    }
  }
 }    
}

다음과 같은 방법을 정의할 수 있습니다.editStudent통과하다sidas 파라미터:

템플릿:

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

언급URL : https://stackoverflow.com/questions/54095979/vuejs-passing-parameters-to-a-popup-dialog