title: VueJS Passing parameters to a Popup "Dialog"
body: <p>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 &quot;Popup windows&quot; that you show the profile for that specific student.</p>
  <p>As right now if you click the button I have &quot;@click=&quot;dialog = true&quot; to open the dialog box and that's it!</p>
  <p>My question how can I pass the student id to this page so I can contact ye API and get the student information</p>
  <p>Student View</p>
  <pre><code>&lt;v-data-table :headers=&quot;headers&quot;
                  :pagination.sync=&quot;pagination&quot;
                  :items=&quot;filteredResources&quot;
                  :search=&quot;search&quot;&gt;
      &lt;template slot=&quot;items&quot; slot-scope=&quot;props&quot;&gt;
        &lt;td&gt;{{ props.item.sid }}&lt;/td&gt;
        &lt;td class=&quot;text-xs-left&quot;&gt;{{ props.item.firstName }}&lt;/td&gt;
        &lt;td class=&quot;text-xs-left&quot;&gt;{{ props.item.lastName }}&lt;/td&gt;
        &lt;td class=&quot;text-xs-left&quot;&gt;{{ props.item.totalHours }}&lt;/td&gt;
        &lt;td class=&quot;text-xs-left&quot;&gt;{{ props.item.reason }}&lt;/td&gt;
        &lt;td class=&quot;text-xs-left&quot;&gt;
          &lt;v-btn fab dark small
                 color=&quot;primary&quot;
                 @click=&quot;dialog = true&quot;&gt;
            &lt;v-icon dark&gt;edit&lt;/v-icon&gt;
          &lt;/v-btn&gt;
        &lt;/td&gt;
      &lt;/template&gt;
      &lt;v-alert slot=&quot;no-results&quot; :value=&quot;true&quot; color=&quot;error&quot; icon=&quot;warning&quot;&gt;
        Your search for &quot;{{ searchQuery }}&quot; found no results.
      &lt;/v-alert&gt;
    &lt;/v-data-table&gt;
  </code></pre>
  <p>Script</p>
  <pre><code>&lt;script&gt;
   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 =&gt; {
        // JSON responses are automatically parsed.
        this.summary = response.data
      })
      .catch(e =&gt; {
        this.errors.push(e)
      })
  },
  computed: {
    filteredResources() {
      if (this.searchQuery) {
        return this.summary.filter((item) =&gt; {
          return item.sid.startsWith(this.searchQuery);
          //return item.searchQuery.startsWith(this.searchQuery);
          //return 
     item.firstName.toLowerCase().includes(this.searchQuery.toLowerCase())
        })
      } else {
        return this.summary;
      }
    }
   }    
  }
  </code></pre>